:root {
    --theme-gray-faint: #edeff1;
    --theme-gray-lightest: #e1e5e8;
    --theme-gray-light: #c4cbd1;
    --theme-gray: #8897a3;
    --theme-gray-dark: #66717a;
    --theme-gray-darkest: #444c52;
    --theme-cyan-dark: #147f7e;
    --theme-cyan: #199f9d; /* same as bootstrap primary */
    --theme-cyan-light: #8ccfce; /* same as bootstrap tertiary */
    --theme-cyan-lightest: #bae2e2;
    --theme-highlight: #ddf1f1;
    --theme-blue: #1971c2;
    --theme-blue-darkest: #14406e;
    --theme-pink-lightest: #ffeeee;
    --theme-yellow-lightest: #ffffdd;
}

/*=============================================================================
 * elements
 *=============================================================================
 */

body {
    line-height: 1.6;
}

a:hover,
a:focus {
    text-decoration: none;
}

a.card, a.card:hover {
    color: inherit;
}

a.text-primary-alt,
a.text-primary-alt:visited {
    font-weight: bold;
    color: var(--theme-cyan-light);
}

a.text-primary-alt:hover {
    color: var(--theme-cyan-lightest);
}

.text-light a {
    color: var(--theme-cyan-light);
}

ol {
    padding-left: 1.625rem;
    margin-bottom: 1rem;
}

ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

li {
    padding-bottom: 1rem;
}

/*=============================================================================
 * typography
 *=============================================================================
 */

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
    line-height: 1.2;
}

/* families & weights */
h1, .h1,
h4, .h4 {
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
}

h2, .h2,
h3, .h3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}

/* sizes */
h1, .h1 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

h2, .h2 {
    font-size: 1.25rem;
    margin-bottom: 1.25rem;
}

h3, .h3 {
    font-size: 1.125rem;
    margin-top: 1.5rem;
    margin-bottom: 1.125rem;
}

.alert-heading {
    margin-top: 0;
}

.h-wordmark {
    font-size: 1.125rem;
}

h4, .h4 {
    font-size: 1rem;
    margin-top: 1.25rem;
    margin-bottom: 1rem;
}

label,
legend {
    font-size: 1rem;
    margin-bottom: 0.125rem;
}

/* increase bootstrap's small font size */
small, .small {
    font-size: 85%;
}

.notation {
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    h1, .h1 {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    h2, .h2 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    h3, .h3 {
        font-size: 1.25rem;
        margin-bottom: 1.25rem;
    }

    .h-wordmark {
        font-size: 1.25rem;
    }

    h4, .h4 {
        font-size: 1.125rem;
    }
}

.t-bold {
    font-weight: 700;
}

.t-normal {
    font-weight: 400;
}

.t-italic {
    font-style: italic;
}

.t-upper {
    text-transform: uppercase;
}

.t-sans {
    font-family: 'Roboto', sans-serif;
}

.t-flush-bottom {
    margin-bottom: 0;
}

.t-space-top {
    margin-top: 1.25rem;
}

/*=============================================================================
 * layout
 *=============================================================================
 */

/* use for major sections of different colors */
section {
    background-color: white;
    padding: 3rem 0;
}

/* use for content chunking within a major section */
.subsection {
    margin: 3rem 0;
}

.subsection:first-child {
    margin-top: 0;
}

@media (min-width: 768px) {
    section {
        padding: 5rem 0;
    }

    .subsection {
        margin: 5rem 0;
    }

    .subsection:first-child {
        margin-top: 0;
    }
}

section.gallery {
    padding: 0;
}

/* a narrower container for reasonable text widths - use inside .container */
.container-text {
    max-width: 690px;
}

/*=============================================================================
 * slabs
 *=============================================================================
 */

/* extend bootstrap color utilities */
.bg-black {
    background-color: black;
}

.bg-lightest {
    background-color: var(--theme-gray-lightest);
}

.bg-darkest {
    background-color: var(--theme-gray-darkest);
}

.bg-primary-lightest {
    background-color: var(--theme-cyan-lightest);
}

.bg-primary-darkest {
    background-color: var(--theme-cyan-dark);
}

.bg-blue-darkest {
    background-color: var(--theme-blue-darkest);
}

.slab-heading-gray {
    background-color: var(--theme-gray-lightest);
    padding: 0.6em;
}

.next-games .slab-heading-gray {
    display: none;
}

.bg-highlight {
    background-color: var(--theme-highlight);
    padding: 0.25rem 0.375rem;
}

/*=============================================================================
 * cards
 *=============================================================================
 */

/* use square corners on all bootstrap cards */
.card,
.card-header:first-child {
    border-radius: 0;
    border: 0;
}

.card {
    margin-bottom: 1.5rem;
}

.card-stripe {
    border: 0;
    padding: 0;
    border-left: 16px solid var(--theme-cyan);
}

/*=============================================================================
 * buttons
 *=============================================================================
 */

.btn {
    border-radius: 25px;
}

@media (min-width: 768px) {
    .btn-lg {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.btn-form {
    margin-top: 2.5rem;
}

/*=============================================================================
 * inputs
 *=============================================================================
 */

.input-search {
    border: 2px solid var(--theme-cyan-light);
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    height: auto;
}

/*=============================================================================
 * dropdown
 *=============================================================================
 */

/* customize bootstrap dropdown */
.dropdown-item {
    padding: .75rem 1.5rem;
}

/*=============================================================================
 * lists
 *=============================================================================
 */

.list-bulleted {
    list-style-type: disc;
    padding-left: 1.5rem;
}

/* simple ruled list, visually similar to the bootstrap table */
.list-ruled li {
    border-top: 1px solid var(--theme-gray);
    padding-top: 1rem;
}

.list-ruled li:last-child {
    border-bottom: 1px solid var(--theme-gray);
}

.list-ruled li.list-heading {
    background-color: var(--theme-gray-faint);
}

/* multi-column list */
@media (min-width: 768px) {
    .list-multi-column {
        columns: 2 auto;
    }
}
@media (min-width: 992px) {
    .list-multi-column {
        columns: 3 auto;
    }
}

/* avoid wrapping padding between columns so they aren't jagged */
.list-multi-column li {
    padding-bottom: 0;
    margin-bottom: 1rem;
}

/* inline list, used primarily for nav */
.list-inline {
    margin: 0;
}

.list-inline li {
    display: inline;
    padding: 0 0.5rem;
}

.list-inline-tight li {
    padding: 0 0.375rem;
}

.list-inline-spacious li {
    padding: 0 1.25rem;
}

.list-inline li:first-child {
    padding-left: 0;
}

.list-inline li:last-child {
    padding-right: 0;
}

/*=============================================================================
 * tables
 *=============================================================================
 */

.table td,
.table th {
    padding: .75rem .5rem;  /* make tables fit on phones */
}

.table-standings {
    font-size: 0.75rem;     /* smaller font size for small phones */
}

@media (min-width: 375px) {
    .table-standings {
        font-size: 1rem;
    }
}

.table-awards td,
.table-awards th {
    width: 50%;
}

@media (min-width: 768px) {
    .table-awards {
        width: 66%;
    }
}

.table-wm {
    background-color: var(--theme-pink-lightest);
}

.table-captains {
    background-color: var(--theme-yellow-lightest);
}

/*=============================================================================
 * banner
 *=============================================================================
 */

.banner {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.875rem;
}

.banner-details {
    font-size: 0.75rem;
    text-decoration: underline;
}

@media (min-width: 768px) {
    .banner {
        font-size: 1rem;
    }
    .banner-details {
        font-size: 0.875rem;
    }
}

/*=============================================================================
 * base template
 *=============================================================================
 */

/*
 * footer positioning: main padding starts large, pushing footer off
 * screen. When JS runs, it adjust the main padding to accommodate the
 * footer properly. Similar technique from scampersand.com
 */

body {
    position: relative;
    min-height: 100vh;
}

main {
    min-height: 100%;
    padding-bottom: 100vh;  /* temporary until JS */
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    visibility: hidden;  /* temporary until JS */
}

nav {
    padding: 0.5rem 0;
}

nav .navitem {
    padding: 0 1rem;
}

nav .navitem:first-child {
    padding-left: 0;
}

nav .navitem:last-child {
    padding-right: 0;
}

/************/

footer .nav-link {
    padding-left: 0;
}

.legalese {
    font-size: 0.75rem;
    line-height: 1.6;
    padding: 2.5rem 0;
}

/*=============================================================================
 * home page
 *=============================================================================
 */

/*
 * The hero behavior we want:
 *
 *   - on medium to wide screens, scale to fit, preserving aspect ratio.
 *
 *   - on narrow screens, crop from the sides of the image as necessary to
 *     ensure sufficient height for the text overlay and action button.
 *
 * We can get the medium/wide behavior from an <img> tag, using width:100%
 * and height:auto. But on narrow screens this will become unacceptably
 * short.
 *
 * We can get the narrow behavior using background-image,
 * background-position, background-size and min-height. But on wide screens
 * the div height won't grow automatically to avoid cropping the image.
 *
 * Combining the approaches, the image we see is provided by
 * background-image. To ensure the height on a wide screen, we have an
 * <img> tag that's visibility:hidden. They're the same image, so the
 * browser only loads once.
 */

.hero {
    position: relative;
    /* background-image: DRY set in home.html */
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    min-height: 80vh;
    max-height: 95vh;
    max-height: calc(100vh - 46px);  /* nav height */
}

.hero.with-banner {
    max-height: calc(100vh - 102px);  /* nav + banner height */
}

/* bootstrap md is 768px, lg is 992px */
@media (min-width: 768px) {
    .hero {
        min-height: 0;
    }
}

/* this serves purely to set the height of the container */
.hero-img {
    width: 100%;
    height: auto;
    visibility: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.hero-text {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-title {
    text-align: center;
}

/************/

.info-block {
    margin-bottom: 1.25rem;
}

.info-block li {
    padding-bottom: 0;
}

.league-rules a,
.announcement-text a {
    font-weight: bold;
}

@media (min-width: 375px) {
    .league-rules ol {
        font-size: 1.125rem;
    }
}

/*=============================================================================
 * registration
 *=============================================================================
 */

.doc-box {
    border-color: var(--theme-gray-light);
    border-style: solid;
    border-width: 1px;
    -webkit-box-shadow: 0 8px 6px -6px var(--theme-gray-dark);
    -moz-box-shadow: 0 8px 6px -6px var(--theme-gray-dark);
    box-shadow: 0 8px 6px -6px var(--theme-gray-dark);
    padding: 2rem 1.25rem 3rem;
}

@media (min-width: 768px) {
    .doc-box {
        padding: 3rem 3rem 6rem;
    }
}

@media (min-width: 992px) {
    .doc-box {
        padding: 5rem 7rem 7rem;
    }
}

.form-section {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: var(--theme-gray-lightest);
}