/* ===========================================================
   America 250 Section CSS
   Clean, responsive, and ready for PHP include
=========================================================== */

/* Main section container */
#america250-section {
    width: 100%;
    margin: 2rem 0;      /* spacing between sections */
    box-sizing: border-box;
}

/* Intro flex row for desktop */
.america250-intro {
    display: flex;
    gap: 2rem;
    align-items: center;
    flex-wrap: nowrap;
    padding-left: 1rem;     /* align with main content */
    padding-right: 1rem;
    box-sizing: border-box;
}

/* Desktop row */
.america250-row.hidephone {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: nowrap;
    padding-left: 0;        /* no extra padding inside row */
    padding-right: 0;
    box-sizing: border-box;
}

/* Logo column */
.america250-logo {
    flex: 0 0 250px;
}

.america250-logo img {
    max-width: 250px;
    width: 100%;
    height: auto;
}

/* Text column - white box with border */
.america250-text {
    flex: 1;
    background-color: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    padding: 1rem;          /* internal padding for text */
    box-sizing: border-box;
}

/* Phone intro text above button */
.america250-phone-intro {
    font-size: 1em;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

/* Hidden detail panel */
#america250-details {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background-color: #f5f5f5;
    box-sizing: border-box;
}

.america250-details-inner {
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

/* Event rows */
.america250-event {
    display: flex;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #ddd;
}

.america250-event:last-child {
    border-bottom: none;
}

.event-date {
    min-width: 110px;
    font-weight: bold;
}

.event-title {
    font-weight: bold;
}

.event-description {
    font-size: 0.9em;
}

/* Close buttons */
.america250-close-row {
    width: 100%;
}

.close-top {
    text-align: right;
    margin-bottom: 1rem;
}

.close-bottom {
    text-align: left;
    margin-top: 1.5rem;
}

/* =========================================================
   America250 Visibility & Layout Control
========================================================= */

/* Default: Hide mobile view, show desktop view */
.showphone {
    display: none;
}
.hidephone {
    display: flex;
}

/* TABLET & PHONE (Everything under 900px) */
@media screen and (max-width: 900px) {

    .hidephone {
        display: none !important;
    }

    .showphone {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Stack event details vertically */
    .america250-event {
        flex-direction: column;
        padding: 1rem 0;
    }

    .event-date {
        min-width: auto;
        margin-bottom: 0.25rem;
    }

    .event-content {
        width: 100%;
        box-sizing: border-box;
    }

    /* RE-ORDERING: Ensures Logo is top, then Text, then Button */
    /* Note: These classes must be direct children of the .showphone container */
    .america250-logo {
        order: 1; 
        margin-bottom: 1rem;
        align-self: center; /* Centers logo on mobile */
    }

    .america250-phone-intro {
        order: 2;
        margin-bottom: 1rem;
    }

    .america250-phone button, 
    #america250-section button {
        order: 3;
        width: 100%; /* Makes button easier to tap on phones */
    }
}