/* =========================================================
   TAU BETA PI — MICHIGAN ALPHA
   Design tokens: deep Spartan green + old gold, warm cream base.
   Brown is intentionally retired as a primary color — green does
   the "MSU" signaling, gold does the "TBP" signaling, and mixing
   all three read muddy in testing.
   ========================================================= */

:root {
    --tbp-green: #17453c;
    --tbp-green-dark: #0e2b25;
    --tbp-green-tint: #eaf1ee;
    --tbp-gold: #b8962e;
    --tbp-gold-light: #d9bd6a;
    --tbp-cream: #faf7f0;
    --tbp-charcoal: #2b2b28;
    --tbp-gray: #6b6b66;
}

html, body {
    height: 100%;
}

body {
    font-family: 'Nunito Sans', sans-serif;
    background-color: var(--tbp-cream);
    color: var(--tbp-charcoal);
    /* Sticky footer: body is a column flexbox with exactly 3 children —
       header, main, footer. Only .site-main gets flex: 1 (below), so it
       grows to fill leftover space and pushes the footer to the bottom.
       Everything INSIDE .site-main stays normal block layout, so nested
       "margin: ... auto ..." centering (.content, .header, .calendar,
       etc.) isn't affected — that's what broke the calendar page before. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-main {
    flex: 1 0 auto;
    width: 100%;
}

.lettersImg {
    padding-right: 1em;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */

h1, h2, h3, h4, h5, .heading {
    font-family: 'Fraunces', 'Nunito Sans', serif;
    font-weight: 600;
    color: var(--tbp-green-dark);
}

h1 {
    position: relative;
    display: inline-block;
    padding-bottom: 0.35em;
}

h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 64px;
    background-color: var(--tbp-gold);
    border-radius: 2px;
}

.header h1 {
    margin: 0.25em 0;
}

.heading {
    margin: 30px 20px 10px;
}

strong {
    color: var(--tbp-green-dark);
}

a {
    color: var(--tbp-green);
}

a:hover {
    color: var(--tbp-gold);
    text-decoration: none;
}

/* =========================================================
   NAVIGATION BAR
   ========================================================= */

nav {
    box-shadow: 0 3px 10px rgba(14, 43, 37, 0.25);
}

.navbar-light {
    background-color: var(--tbp-green);
    padding: 0.75em 1.25em;
}

.navbar-light .navbar-brand {
    color: var(--tbp-cream);
    font-family: 'Fraunces', serif;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.navbar-light .navbar-brand:hover {
    color: var(--tbp-gold-light);
}

/* Bootstrap's own ".navbar-light .navbar-nav .nav-link" rule (dark,
   semi-transparent) is more specific than a bare ".nav-link" selector,
   so it has to be overridden at the same specificity here. */
.navbar-light .navbar-nav .nav-link {
    color: rgba(250, 247, 240, 0.92);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    color: var(--tbp-gold-light);
}

.navbar-brand,
.nav-item {
    color: var(--tbp-cream);
}

/* Dropdown panel has a white background, so its text needs to stay dark
   — it should NOT inherit the light nav-bar text color. */
.dropdown-item {
    color: var(--tbp-green-dark);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--tbp-green-tint);
    color: var(--tbp-green-dark);
}

.navbar-toggler {
    border-color: rgba(250, 247, 240, 0.4);
}

.navbar-toggler-icon {
    filter: invert(1);
}

nav a:hover,
ul.nav a:hover {
    color: var(--tbp-gold-light);
}

.dropdown-menu {
    float: left;
    border-top: 3px solid var(--tbp-gold);
}

/* =========================================================
   HERO (homepage)
   ========================================================= */

.hero {
    position: relative;
    background-color: var(--tbp-cream);
}

.hero-img-wrap {
    position: relative;
    width: 100%;
    /* Capping the width (instead of just the height) is the actual fix:
       without this, the box becomes an extremely wide, short rectangle
       on ultra-wide monitors, and object-fit: cover has to crop away
       most of the image's height to fill that shape — that's the
       "zoomed in" look. Capping width keeps the banner's proportions
       sane at any screen size; on very wide screens it just letterboxes
       against the cream background instead of over-cropping the photo. */
    max-width: 1600px;
    margin: 0 auto;
    aspect-ratio: 2.4 / 1;
    min-height: 280px;
    overflow: hidden;
}

.hero-img-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* Lower percentage = less of the top gets cropped away. Raise this
       (e.g. 25–40%) if too much sky/background shows above the Bent,
       lower it (e.g. 0–10%) if the top still gets clipped. */
    object-position: center 12%;
}

@media only screen and (max-width: 700px) {
    .hero-img-wrap {
        /* Taller ratio on mobile so the caption text has room to breathe
           and the photo isn't squeezed into a sliver. */
        aspect-ratio: 4 / 3;
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(14, 43, 37, 0.15) 0%, rgba(14, 43, 37, 0.85) 100%);
    display: flex;
    align-items: flex-end;
}

.hero-caption {
    color: var(--tbp-cream);
    padding: 1.5em 2em;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}

.hero-caption .eyebrow {
    color: var(--tbp-gold-light);
    font-family: 'Fraunces', serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 0.4em;
    display: block;
}

.hero-caption h1 {
    color: var(--tbp-cream);
    font-size: 2.1rem;
}

.hero-caption h1::after {
    left: 50%;
    transform: translateX(-50%);
}

@media only screen and (max-width: 500px) {
    .hero-caption h1 {
        font-size: 1.5rem;
    }
}

/* =========================================================
   CAROUSEL
   ========================================================= */

.carousel {
    padding-top: 1em;
    margin-bottom: 0;
    width: 70%;
    align-content: center;
    margin: auto;
}

.carousel-item {
    height: 35em;
    background-color: var(--tbp-green-tint);
}

.header {
    padding-top: 1.5em;
    margin: auto;
    width: 70%;
    align-content: center;
    color: var(--tbp-charcoal);
}

.header p {
    line-height: 1.7;
}

@media only screen and (max-width: 500px) {
    .header {
        padding-top: 1em;
        margin: auto;
        width: 90%;
        align-content: center;
    }
    .carousel {
        padding-top: 1em;
        margin-bottom: 0;
        width: 90%;
        align-content: center;
        margin: auto;
    }

   .carousel-item {
        height: 18em;
        background-color: var(--tbp-green-tint);
    }
}

.carousel-item > img {
    width: 80%;
    height: 100%;
    margin: auto;
}

.homePage {
    background-color: var(--tbp-cream);
}

/* =========================================================
   CALENDAR
   ========================================================= */

.calendar {
    margin: 40px auto;
    text-align: center;
}

iframe {
    width: 70%;
    height: 40em;
    margin: auto;
    border: 3px solid var(--tbp-green);
    border-radius: 10px;
}

/* =========================================================
   MAIN CONTENT PANELS
   ========================================================= */

.content {
    width: 85%;
    margin: 50px auto;
    padding: 30px;
    background-color: #ffffff;
    border: 1px solid #e4ddc9;
    border-top: 4px solid var(--tbp-gold);
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(14, 43, 37, 0.06);
    line-height: 1.7;
}

.content ul {
    line-height: 1.9;
}

/* Adds breathing room between each top-level event (or any top-level
   bulleted item) in .content — without adding gaps between the smaller
   sub-bullets (Date/Time/Location/etc.) inside each one. */
.content > ul > li {
    margin-bottom: 1.25em;
}

.content > ul > li:last-child {
    margin-bottom: 0;
}

/* =========================================================
   TABLES (Officers / Advisors)
   ========================================================= */

.container {
    padding-bottom: 20px;
}

.form-group label {
    font-weight: 700;
    color: var(--tbp-green-dark);
}

#year {
    border: 1px solid var(--tbp-green);
}

#year:focus {
    border-color: var(--tbp-gold);
    box-shadow: 0 0 0 0.2rem rgba(184, 150, 46, 0.25);
}

table {
    border: 1px solid #e4ddc9;
    border-radius: 8px;
    overflow: hidden;
    background-color: #ffffff;
}

.table thead th {
    background-color: var(--tbp-green);
    color: var(--tbp-cream);
    font-family: 'Fraunces', serif;
    font-weight: 600;
    border: none;
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--tbp-green-tint);
}

.table-hover tbody tr:hover {
    background-color: #f5ead0;
    box-shadow: inset 4px 0 0 var(--tbp-gold);
}

.table td, .table th {
    border-top: 1px solid #ece5d2;
    padding: 0.85rem 0.9rem;
}

h3 {
    margin-top: 1.5em;
}

/* =========================================================
   PHOTO GALLERY (media.html)
   ========================================================= */

#media {
    background-color: var(--tbp-cream);
}

.jumbotron {
    background-color: var(--tbp-green);
    color: var(--tbp-cream);
    border-radius: 10px;
    text-align: center;
    padding: 2.5em 1em;
    margin-top: 1.5em;
}

.jumbotron h1 {
    color: var(--tbp-cream);
}

.jumbotron h1::after {
    left: 50%;
    transform: translateX(-50%);
}

.jumbotron p {
    color: var(--tbp-gold-light);
    font-size: 1.1rem;
    margin-bottom: 0;
}

.image1 { background-image: url("images/BentPolishing2014.jpg"); }
.image2 { background-image: url("images/InductionDinner2014_2.JPG"); }
.image3 { background-image: url("images/InductionDinner2014.JPG"); }
.image4 { background-image: url("images/InductionEBoard2014.JPG"); }
.image5 { background-image: url("images/InductionGroupPhoto2014.JPG"); }
.image6 { background-image: url("images/MembershipAward2014.jpg"); }
.image7 { background-image: url("images/BentPolishing3.jpg"); }
.image8 { background-image: url("images/EngineeringFutures1.jpg"); }

.img-thumbnail {
    margin: 30px auto;
    background-color: #e9ecef;
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(14, 43, 37, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.img-thumbnail:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 22px rgba(14, 43, 37, 0.16);
}

.image {
  width: 100%;
  height: 350px;
  background-size: cover;
  background-position: center center;
}

.caption {
    padding: 14px 16px;
    height: 7em;
    background-color: #ffffff;
}

.caption p {
    margin-bottom: 0;
    color: var(--tbp-charcoal);
    font-size: 0.95rem;
}

/* =========================================================
   FOOTER
   ========================================================= */

.site-footer {
    background-color: var(--tbp-green-dark);
    color: var(--tbp-cream);
    border-top: 4px solid var(--tbp-gold);
    padding: 2.5em 1em 1.5em;
}

.site-footer .footer-inner {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.site-footer h5 {
    color: var(--tbp-gold-light);
    font-family: 'Fraunces', serif;
    margin-bottom: 0.6em;
}

.site-footer a {
    color: var(--tbp-cream);
}

.site-footer a:hover {
    color: var(--tbp-gold-light);
}

.site-footer .footer-meta {
    margin-top: 1.5em;
    padding-top: 1em;
    border-top: 1px solid rgba(250, 247, 240, 0.15);
    font-size: 0.85rem;
    color: rgba(250, 247, 240, 0.65);
}