:root {
    --dark-background: #06152a;
    --dark-background-translucent: #06152a99;
    --light-background:#052f69;
    --vlight-background: #0a49a0;
    --accent: #dd723a;
    --light-accent: #f7a76a;
    --text: #feffff;
    --text-dim: #c5c1c2;
}

body {
    color: var(--text);
    background: var(--dark-background);
    font-family: system-ui, sans-serif;
    font-size: 16pt;
}

.top-banner {
    overflow: hidden;
    max-height: 250px;
    position: relative;
}

.top-panorama {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
}

.top-logo {
    position: absolute;
    max-height: 100%;
    max-width: 100%;
    background: linear-gradient(to right, var(--dark-background), var(--dark-background-translucent) 75%, #ffffff00);
}

nav {
    font-size: 20pt;
    background: var(--light-background);
    /* color: black; */
}

.nav-list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    /* max-width: 960px; */
    /* margin-inline: auto; */
}

.nav-list a {
    display: block;
    padding: 1rem 1.5rem;
    text-decoration: none;
    color: var(--text);
    transition: 0.3s;
}

.nav-list a:hover {
    background: var(--accent);
}

.wrapper {
    max-width: 1400px;
    margin-inline: auto;
}

.wrapper a {
    color: var(--accent);
}

.wrapper a:visited {
    color: var(--light-accent);
}

.block-centered {
    display: block;
    margin-inline: auto;
}

.centered {
    text-align: center;
}

.vertically-padded {
    padding: 1rem 0;
}

.horizontal-spacer-1 {
    padding: 0 1rem;
}

.bar {
    background-color: var(--light-background);
}

footer {
    /* TODO: The position fixed was to ensure the footer went to the bottom 
       of the screen when there wasn't enough content. But that makes it
       overlap content if scrolling is needed - need to figure out the 
       middle ground. */
    /* position: fixed;
    left: 0;
    bottom: 0; */
    width: 100%;

    background: var(--light-background);
    text-align: center;
    padding: 2rem 0;
}

/* Homepage styles */

.services-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    margin: 1rem 0 ;
}

.service-highlight {
    /* border: var(--light-background) solid 2px; */
    background-color: var(--light-background);
    border-radius: 1rem;
    padding: 1rem;
}

.service-highlight img {
    display: block;
    max-width: 240px;
    margin-inline: auto;
    /* background-color: white; */
}

/* Services page styles */

.service-panel {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
    /* display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); */
    gap: 1rem;
    padding-bottom: 1rem;
    margin: 1rem 0;
    border-bottom: var(--light-background) solid 3px;
}

.service-panel:last-child {
    border-bottom: none;
}

.service-description {
    flex: 1 1 30%;
    padding-left: 16px;
    padding-right: 16px;
}

.service-image {
    flex: 0 1 700px;
}

.service-image img {
    /* TODO: need to check on a 4k monitor, perhaps this should be a relative unit? 
       If so, update the help text for the model field.*/
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}

.services-grid a, .service-panel a, .dashboard a, .footer-line a {
    color: var(--text)
}

.services-grid a:hover, .service-panel a:hover, .dashboard a:hover, .footer-line a {
    color: var(--accent)
}

.helptext {
    font-size: 10pt;
}

.form-error-alert {
    max-width: 800px;
    margin-inline: auto;
    border: var(--accent) solid 3px;
    text-align: center;
    padding: 1em;
}

.event-media-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
    margin: 1rem 0 ;
}

.event-media-grid-item {
    background-color: var(--light-background);
    border-radius: 1rem;
    border: var(--accent) solid 2px;
    padding: 1rem;
}

.event-media-grid-item img {
    max-width: 100%;
}

.event-media img {
    max-width: 100%;
}

.booking-form-title {
    max-width: 800px;
    margin-inline: auto;
    margin-bottom: 1rem;
}

.booking-form {
    max-width: 800px;
    margin-inline: auto;
    margin-bottom: 1rem;
}

.booking-form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.booking-form input, .booking-form textarea, .booking-form select, .boone-button {
    padding: 10px;
    font-size: 16pt;
    margin-top: 9px;
    background-color: var(--vlight-background);
    color: var(--text);
    border: 2pt solid var(--light-background);
}

.dashboard-form input, .dashboard-form select {
    padding: 6px;
    font-size: 16pt;
    margin-top: 9px;
    background-color: var(--vlight-background);
    color: var(--text);
    border: 2pt solid var(--light-background);   
}

.inline-form {
    display: inline;
}

.booking-form-button:hover, .dashboard-form input:hover, .boone-button:hover {
    background-color: var(--accent);
    color: black;
    cursor: pointer;
}

.booking-form-wide-input input, .booking-form-wide-input textarea {
    min-width: 90%;
}

.booking-date-group {
    border: var(--vlight-background) solid 3px;
    margin: 1rem 0;
}

.booking-date {
    background: var(--vlight-background);
    padding: 1em 0pt;
}


@media (min-width: 992px) {
    .booking-row {
        display: flex;
        flex-wrap: wrap;
    }
}

.booking-row {
    padding: 0.5em;
}

.booking-row div {
    margin: 0pt 1em;
}

.booking-row img {
    height: 1.5em;
}

.booking-row:nth-child(odd) {
    background: var(--dark-background);
}

.booking-row:nth-child(even) {
    background: var(--light-background);
}

.booking-conflict-table {
    width: 100%;
}

.booking-conflict-table th {
    background: var(--accent);
    padding: 6pt 0.5em;
}

.booking-conflict-table td {
    padding: 6pt 0.5em;
}

.booking-conflict-table tr:nth-child(even) {
    background: var(--light-background);
}

.booking-conflict-table tr:nth-child(odd) {
    background: var(--vlight-background);
}

.hovertext {
    position: relative;
    border-bottom: 1px dotted black;
}
  
.hovertext:before {
    content: attr(data-hover);
    visibility: hidden;
    opacity: 0;
    width: 280px;
    background-color: var(--accent);
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0;
    transition: opacity 0.5s ease-in-out;
  
    position: absolute;
    z-index: 1;
    left: 0;
    top: 110%;
}
  
.hovertext:hover:before {
    opacity: 1;
    visibility: visible;
}

.contacts-list {
    border: var(--vlight-background) solid 3px;
    margin: 1em 0;
}

.contact-row {
    padding: 0.5em;
}

.contact-row:nth-child(odd) {
    background: var(--dark-background);
}

.contact-row:nth-child(even) {
    background: var(--light-background);
}

.contact-subrow {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0.5em 0pt;
}

.contact-subrow div {
    margin: 0pt 2em;
    /* flex-basis: 300px; */
    text-align: center;
}


.contact-details-table {
    width: 100%;
}

.contact-details-table th, .contact-details-table td {
    padding: 0.5em;
    vertical-align: top;
}

.contact-details-table th {
    min-width: 12ch;
}

.contact-details-table td {
    width: 100%;
}
.warning {
    border: var(--accent) solid 2px;
    background-color: var(--light-background);
    border-radius: 6px;
    padding: 0.5em 0pt;
}

.in-text-img {
    height: 1em;
}

.footer-line img {
    height: 1.5em;
    margin-right: 6pt;
}