/*
 * Upcoming Seminars — Frontend Styles v1.0.3
 * Built by GTU — https://gtu.com
 *
 * NOTE ON SPECIFICITY:
 * All rules are scoped under .us-seminars-wrap and use !important on
 * typography properties to reliably override Divi's theme stylesheet.
 * Brand color tokens live in :root but selectors are fully scoped so
 * editing this file will always take effect on the front end.
 */

/* ============================================================
   BRAND TOKENS  — edit these to restyle everything
   ============================================================ */
:root {
    --us-color-primary:     #035036;
    --us-color-header-bg:   #01695E;
    --us-color-header-text: #ffffff;
    --us-color-separator:   #D9D9D9;
    --us-color-icon:        #2C675E;
    --us-color-body:        #333333;
    --us-color-no-events:   #666666;

    --us-separator-width:   3px;
    --us-col-gap:           40px;
    --us-section-spacing:   48px;
    --us-event-spacing:     24px;
}

/* ============================================================
   WRAPPER
   ============================================================ */
.us-seminars-wrap {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
}

.us-seminars-wrap *,
.us-seminars-wrap *::before,
.us-seminars-wrap *::after {
    box-sizing: border-box !important;
}

/* ============================================================
   MONTH HEADER BAR
   ============================================================ */
.us-seminars-wrap .us-month-header {
    background-color: var(--us-color-header-bg) !important;
    border-radius: 6px !important;
    padding: 16px 24px !important;
    margin-bottom: 28px !important;
    margin-top: var(--us-section-spacing) !important;
    text-align: center !important;
}

.us-seminars-wrap .us-month-header:first-child {
    margin-top: 0 !important;
}

.us-seminars-wrap .us-month-header span {
    color: var(--us-color-header-text) !important;
    font-size: 2.25rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.0em !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    display: block !important;
}

/* ============================================================
   STATES ROW
   ============================================================ */
.us-seminars-wrap .us-states-row {
    display: grid !important;
    grid-template-columns: repeat( var(--us-col-count, 2), 1fr ) !important;
    gap: 0 !important;
    margin-bottom: var(--us-section-spacing) !important;
}

/* ============================================================
   STATE COLUMN
   ============================================================ */
.us-seminars-wrap .us-state-col {
    padding: 0 var(--us-col-gap) 0 0 !important;
    border-right: var(--us-separator-width) solid var(--us-color-separator) !important;
}

.us-seminars-wrap .us-state-col--last {
    border-right: none !important;
    padding-right: 0 !important;
    padding-left: var(--us-col-gap) !important;
}

.us-seminars-wrap .us-states-row .us-state-col:not(:first-child):not(.us-state-col--last) {
    padding-left: var(--us-col-gap) !important;
}

/* ============================================================
   STATE HEADING  e.g. "ILLINOIS"
   ============================================================ */
.us-seminars-wrap .us-state-heading {
    font-size: 2rem !important;
    font-weight: 900 !important;
    color: var(--us-color-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* ============================================================
   INDIVIDUAL EVENT BLOCK
   ============================================================ */
.us-seminars-wrap .us-event {
    padding-bottom: var(--us-event-spacing) !important;
    margin-bottom: var(--us-event-spacing) !important;
    border-bottom: var(--us-separator-width) solid var(--us-color-separator) !important;
}

.us-seminars-wrap .us-event--last {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Date & Time */
.us-seminars-wrap .us-event-datetime {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    color: var(--us-color-body) !important;
    margin: 0 0 1px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    display: block !important;
}

/* Presenter Name */
.us-seminars-wrap .us-event-presenter {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    color: var(--us-color-primary) !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    display: block !important;
}

/* Location with map pin */
.us-seminars-wrap .us-event-location {
    font-size: 1.250rem !important;
    font-weight: 600 !important;
    color: var(--us-color-body) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.4 !important;
}

/* Map pin icon via CSS mask — vertically centred by align-items:center on parent */
.us-seminars-wrap .us-event-location::before {
    content: '' !important;
    display: inline-flex !important;
    flex-shrink: 0 !important;
    align-self: center !important;
    width: 24px !important;
    height: 28px !important;
    background-color: var(--us-color-icon) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z'/%3E%3C/svg%3E") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}

/* ============================================================
   NO EVENTS MESSAGES
   ============================================================ */
.us-seminars-wrap .us-no-events {
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: var(--us-color-no-events) !important;
    margin: 0 !important;
    padding: 0 !important;
    font-style: italic !important;
}

.us-seminars-wrap .us-no-upcoming {
    text-align: center !important;
    color: var(--us-color-no-events) !important;
    font-size: 1rem !important;
    padding: 40px 0 !important;
}

/* ============================================================
   RSVP BUTTON  (stubbed — only renders when rsvp_url field is set)
   ============================================================ */
.us-seminars-wrap .us-event-rsvp {
    display: inline-block !important;
    margin-top: 12px !important;
    padding: 9px 22px !important;
    background-color: var(--us-color-header-bg) !important;
    color: #ffffff !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
    line-height: 1 !important;
}

.us-seminars-wrap .us-event-rsvp:hover {
    background-color: var(--us-color-primary) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* ============================================================
   RESPONSIVE — tablet  (≤768px)
   ============================================================ */
@media ( max-width: 768px ) {

    /* Stack columns vertically */
    .us-seminars-wrap .us-states-row {
        grid-template-columns: 1fr !important;
    }

    /* Swap vertical divider for horizontal one between stacked state blocks */
    .us-seminars-wrap .us-state-col {
        border-right: none !important;
        border-bottom: var(--us-separator-width) solid var(--us-color-separator) !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        padding-bottom: 28px !important;
        margin-bottom: 28px !important;
    }

    .us-seminars-wrap .us-state-col--last {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Scale down month header */
    .us-seminars-wrap .us-month-header span {
        font-size: 1.9rem !important;
    }

    /* Scale down state heading so it doesn't dominate on tablet */
    .us-seminars-wrap .us-state-heading {
        font-size: 1.5rem !important;
    }

    :root {
        --us-col-gap: 0px;
        --us-section-spacing: 36px;
    }
}

/* ============================================================
   RESPONSIVE — mobile  (≤480px)
   ============================================================ */
@media ( max-width: 480px ) {

    .us-seminars-wrap .us-month-header {
        padding: 13px 16px !important;
    }

    /* Month header text scales further down on small screens */
    .us-seminars-wrap .us-month-header span {
        font-size: 1.4rem !important;
    }

    /* State heading comfortable on small screens */
    .us-seminars-wrap .us-state-heading {
        font-size: 1.2rem !important;
        letter-spacing: 0.04em !important;
        margin-bottom: 16px !important;
    }

    /* Event text scales down proportionally */
    .us-seminars-wrap .us-event-datetime,
    .us-seminars-wrap .us-event-presenter {
        font-size: 1rem !important;
    }

    .us-seminars-wrap .us-event-location {
        font-size: 0.95rem !important;
        gap: 6px !important;
    }

    /* Slightly smaller pin icon on mobile */
    .us-seminars-wrap .us-event-location::before {
        width: 18px !important;
        height: 22px !important;
    }
}