@charset "UTF-8";

/* ============================================================
   Dakota Valley Symphony — Modernized Green Theme (2026-10-19b)
   Clean header + right-column hero + modern footer
   ============================================================ */

/* -----------------------------
   Global Styles
   ----------------------------- */

/* 8/29/2024 RES: new green color scheme */
body {
    background-image: url(../img/bgFull_green.png);
    background-repeat: repeat-x;
    font-family: "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

a {
    color: #4e4950;
    font-weight: bold;
    text-decoration: none;
}

a:hover {
    color: #e6a960;
}

#wrapper {
    width: 1020px;
    margin: auto;
}

/* Hide mobile-only elements on desktop */

.mobile,
.mobile-logo,
#mobile_menu_top,
#mobile_menu_bottom
{
    display: none;
}

/* ============================================================
   HEADER — Logo + Social (top row), Nav (bottom-left)
   ============================================================ */

#top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-height: 190px;
    background-image: url(../img/bgNotes-190.png);
    background-repeat: no-repeat;
    padding: 20px 0 10px 0;
}

#top-row {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

#logo img {
    max-height: 120px;
    height: auto;
    width: auto;
}

#social {
    display: flex;
    gap: 10px;
    align-items: center;
}

#social img {
    height: 40px;
    width: auto;
}

.nav {
    width: 100%;
    margin-top: 10px;
}

.nav ul {
    display: flex;
    gap: 30px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.nav ul li a {
    font-family: georgia, serif;
    font-size: 1.3em;
    letter-spacing: .15em;
    color: white;
}

/* =====================================================================================================
   MAIN CONTENT — Left column + right-column hero photo
   -- main is for single column text, both desktop and phone
   -- customized main-index for index.html, main-photo for pages that want 2 columns (text-photo or photo-text)
		(e.g. venue.html, bio pages). They are customized in phone.css.
	   -- main-index does not show at all on phone (index.html is menu-only in portrait orientation)
	   -- main-photo is designed for 2 columns on desktop, with content-left and content-right sections.
			On phone this will display as a single full width column.
   ===================================================================================================== */

#main,
#main-index,
#main-photo {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 40px;
}

#content-left {
    flex: 1;
    min-width: 0;
}

/* Hero image at 450px max width */
#content-right img {
    max-width: 450px;
    width: 100%;
    height: auto;
    margin-top: 0;
}

.content-section {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 40px;
}

.content-text {
    flex: 1;
}

.content-image {
    flex: 0 0 300px;
}

.content-image img {
    width: 100%;
    height: auto;
}

/* ============================================================
   FOOTER — Modern 4-column layout (F2)
   ============================================================ */

#main_footer {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
    width: 100%;
}

#main_footer .section {
    flex: 0 0 23%;
    display: block;
}

/* FINAL FLOAT OVERRIDE — Footer only */
#main_footer .section {
    float: none !important;
    clear: none !important;
    width: auto !important;
}

.title {
	font-family:georgia, serif;
	font-size: 1.2em;
	font-weight:bold;
	margin-bottom: 1px;
}

.detail {
	font-family: georgia, serif;
	font-size:1.1em;
	margin-bottom: 2px;
}

/* 8/29/2024 RES: new green color scheme */
.secthead {
    padding: 5px;
    font-family: georgia;
    font-size: 1.2em;
    letter-spacing: .1em;
    color: white;
    background-color: #0a4228;
}

.section img {
    width: 100%;
    height: auto;
}

/* horizontal rule -- 8/29/2024 RES: new green color scheme */
hr {
    height: 2em;
    color: #0a4228;
    background-color: #0a4228;
    clear: both;
}

#owl-demo img{
	margin-left: auto;
	margin-right: auto;
}

#footer {
    width: 100%;
    text-align: center;
    font-size: .8em;
}

/* Donate button */
.give-lively-donate {
    background-color: #03866d;
    color: white;
    border-radius: 4px;
    padding: 12px 24px;
    display: inline-block;
    text-decoration: none;
    vertical-align: middle;
    font-size: 16px;
    font-family: Open Sans, sans-serif;
    line-height: 24px;
}

/* Nuclear option — kill ALL float-era rules inside footer */
#main_footer .section,
#main_footer .section * {
    float: none !important;
    clear: none !important;
}

/* Override legacy container behavior inside footer */
#main_footer {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    height: auto !important;
    overflow: visible !important;
}

/* Kill float-era width constraints */
#main_footer .section {
    width: auto !important;
    max-width: none !important;
}

/* Prevent container_12 overflow from clipping footer */
#footer {
    overflow: visible !important;
}

#content-right img {
    max-width: 300px;   /* matches old grid_4 behavior */
    width: 100%;
    height: auto;
    max-height: 500px;  /* matches old rendered height */
    object-fit: contain;
}

/* Members page */

#orchestra,
#chorus {
    box-sizing: border-box;
}

#orchestra {
    width: 65%;
}

#chorus {
    width: 30%;
}

.orchestra-columns {
    display: flex;
    gap: 30px;
}

.orchestra-columns > p {
    flex: 1;
}

@media (max-width: 480px) {

    .orchestra-columns {
        flex-direction: column;
    }

}

.grid_12 {
    clear: both;
}

.sponsor-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.sponsor-logos img {
    max-width: 250px;
    max-height: 100px;
    width: auto;
    height: auto;
}