/*
Theme Name: FNBarena Child Theme
Template: boxoffice
Theme URI: https://fnbarena.astate.edu/
Description: First National Bank Arena Child Theme
Author: Arkansas State University
Author URI: https://astate.edu/
Version: 1.0
Tested up to: 6.8
Requires at least: 5.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: blog, e-commerce, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, flexible-header, footer-widgets, full-width-template, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks
Text Domain: fnbarena
*/


/* =Child-Theme customization starts here
------------------------------------------------------------ */

/* =SINGLE EVENT LAYOUT
------------------------------------------------------------ */
.post_outer {
    width: 100%;
}

.post_inner {
    display: flex;
    gap: 40px;
    margin-bottom: 30px;
}

.post_img {
    flex: 1 1 auto;
    max-width: 750px;
}

.post_img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.post_info {
    flex: 1;
    min-width: 100%;
}

/* =EVENT META & DETAILS
------------------------------------------------------------ */
.tribe-events-meta-group.tribe-events-meta-group-details {
    background-color: #F3F3F3;
    display: flex;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    border-radius: 12px;
    margin: 0;
}

.tribe-events-single-section {
    width: 100%;
}

.tribe-events-meta-group dl {
    margin: 0;
}

.tribe-events-meta-group dl dt {
    margin: 0;
    color: #232323;
    font-family: var(--theme-font-p_font-family, sans-serif);
    font-size: 15px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: 0.75px;
    text-transform: uppercase;
}

.tribe-events-meta-group dl dd,
.tribe-events-meta-group dl dd a {
    margin: 0;
    color: #3D4975;
    font-family: var(--theme-font-p_font-family, sans-serif);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    padding: 10px 0;
    transition: color 0.3s ease;
}

.tribe-events-meta-group dl dd a:hover {
    color: #000000;
    opacity: 1;
}

/* Style tags to match dt/dd format */
.tribe-events-meta-group li.tribe-events-meta-item {
    list-style: none;
    margin: 0;
    margin-top: 16px;
    padding: 0;
    display: block;
}

.tribe-events-meta-group .tribe-event-tags-label {
    display: block;
    margin: 0;
    color: #232323;
    font-family: var(--theme-font-p_font-family, sans-serif);
    font-size: 15px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: 0.75px;
    text-transform: uppercase;
}

.tribe-events-meta-group .tribe-event-tags,
.tribe-events-meta-group .tribe-event-tags a {
    display: block;
    margin: 0;
    color: #3D4975;
    font-family: var(--theme-font-p_font-family, sans-serif);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    padding: 10px 0;
}

.tribe-events-meta-group .tribe-event-tags a {
    padding: 0;
    transition: color 0.3s ease;
}

.tribe-events-meta-group .tribe-event-tags a:hover {
    color: #000000;
    opacity: 1;
}

.tribe-events-gmap {
    font-family: var(--theme-font-p_font-family, sans-serif);
    color: #59595C !important;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    transition: color 0.3s ease;
}

.tribe-events-gmap:hover {
    color: #000000 !important;
    opacity: 1;
}

.tribe-events-single .tribe-events-event-meta.primary {
    width: 100% !important;
}

.tribe-events-event-meta~div:not(.tribe-events-event-meta,.event-tickets) {
    border-top: none;
}

.tribe-events-event-meta dt:not(:first-child) {
    margin-top: 16px !important;
}

.tribe-events-event-meta:before {
    border-top: none !important;
}

.tribe-events-event-meta.primary {
    padding-top: 0;
}

.tribe-events-meta-group-organizer {
    display: none !important;
}

/* =EVENT ACTION BUTTONS
------------------------------------------------------------ */
.event-external-button {
    margin-top: 40px;
    padding: 0;
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

/* Secondary button (non-external buttons) - outlined style */
.event-external-button .tribe-events-button:not(.tribe-events-button-external) {
    background-color: transparent !important;
    background: none !important;
    border: 2px solid var(--theme-font-button_border-color, var(--theme-color-link)) !important;
    color: var(--theme-color-link) !important;
}

.event-external-button .tribe-events-button:not(.tribe-events-button-external):hover,
.event-external-button .tribe-events-button:not(.tribe-events-button-external):focus {
    background-color: var(--theme-font-button_background-color-hover, var(--theme-color-hover)) !important;
    border-color: var(--theme-font-button_border-color-hover, var(--theme-color-hover)) !important;
    color: var(--theme-font-button_color-hover, #fff) !important;
}

/* =CALENDAR DROPDOWN
------------------------------------------------------------ */
.tribe-events-c-subscribe-dropdown {
    margin-top: 40px !important;
    margin-bottom: 0;
}

/* =EVENT NAVIGATION
------------------------------------------------------------ */
#tribe-events-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tribe-events-nav-pagination {
    display: block;
}

.tribe-events-sub-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.tribe-events-nav-previous,
.tribe-events-nav-next {
    flex: 0 1 auto;
    color: #3D4975 !important;
    font-family: var(--theme-font-p_font-family, sans-serif);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.tribe-events-nav-previous {
    text-align: left;
}

.tribe-events-nav-next {
    text-align: right;
}

.tribe-events-sub-nav a {
    color: var(--theme-color-link) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.tribe-events-sub-nav a span {
    color: #A6A8AB;
    transition: color 0.3s ease;
}

.tribe-events-sub-nav a:hover {
    color: #000000 !important;
}

.tribe-events-sub-nav a:hover span {
    color: #000000;
}

/* =EVENT CONTENT
------------------------------------------------------------ */
.tribe-events-single-event-description.tribe-events-content {
    color: #59595C;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.tribe-events-single-event-description.tribe-events-content a {
    transition: color 0.3s ease;
}

.tribe-events-single-event-description.tribe-events-content a:hover {
    color: #000000;
}

.tribe-events-back a, 
.tribe-events-back a:visited {
    color: #3D4975 !important;
}

.tribe-events-schedule.tribe-clearfix {
    margin-top: 22px;
}

.tribe-events-schedule.tribe-clearfix .tribe-event-date-start {
    color: #232323;
    font-family: var(--theme-font-p_font-family, sans-serif);
    font-size: 18px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

/* =EVENT LISTINGS BUTTONS (Grid/List/Day Views)
------------------------------------------------------------ */
.trx-addons-posts-item-title-wrap {
    width: 39%;
}

.event-buttons-wrapper {
    width: 16%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.event-buttons-wrapper .trx-addons-posts-button {
    align-self: flex-end !important;
}

.event-external-button-listing-wrap {
    margin-top: 20px;
    margin-bottom: 10px;
}

.event-buttons-wrapper-calendar .tribe-events-button {
    margin-bottom: 16px;
}

.event-buttons-wrapper-calendar .tribe-events-button:last-child {
    margin-bottom: 0;
}

/* Calendar view buttons - High specificity to override TEC defaults */
.tribe-common .event-buttons-wrapper-calendar a.tribe-events-button.tribe-common-cta {
    display: inline-block !important;
    padding: 13px 23px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    text-align: center !important;
    text-decoration: none !important;
    border-radius: 99px !important;
    cursor: pointer !important;
    border-width: 2px !important;
    border-style: solid !important;
    box-sizing: border-box !important;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease !important;
}

/* More Info button - secondary/outlined style with border */
.tribe-common .event-buttons-wrapper-calendar a.tribe-events-button.tribe-common-cta:not(.tribe-events-button-external) {
    background: none !important;
    background-color: transparent !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--theme-color-link) !important;
    color: var(--theme-color-link) !important;
}

.tribe-common .event-buttons-wrapper-calendar a.tribe-events-button.tribe-common-cta:not(.tribe-events-button-external):hover {
    background-color: var(--e-global-color-primary) !important;
    color: var(--e-global-color-theme_color_alt_title) !important;
    border-color: var(--e-global-color-primary) !important;
}

/* Tickets button - primary/solid */
.tribe-common .event-buttons-wrapper-calendar a.tribe-events-button-external.tribe-common-cta {
    background-color: var(--theme-font-button_background-color, var(--theme-color-link)) !important;
    border-color: var(--theme-font-button_border-color, var(--theme-color-link)) !important;
    color: var(--theme-font-button_color, var(--theme-color-bg_color)) !important;
}

.tribe-common .event-buttons-wrapper-calendar a.tribe-events-button-external.tribe-common-cta:hover {
    background-color: var(--theme-font-button_background-color-hover, var(--theme-color-hover)) !important;
    border-color: var(--theme-font-button_border-color-hover, var(--theme-color-hover)) !important;
    color: var(--theme-font-button_color-hover, var(--theme-color-bg_color)) !important;
}

/* Calendar view buttons wrapper (list and day views) */
.event-buttons-wrapper-calendar {
    display: block;
    margin-top: 20px !important;
}

/* More Info button - secondary/outlined style */
.event-buttons-wrapper-calendar .tribe-events-button:not(.tribe-events-button-external) {
    background: none !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--theme-color-link) !important;
    color: var(--theme-color-link) !important;
}

.event-buttons-wrapper-calendar .tribe-events-button:not(.tribe-events-button-external):hover,
.event-buttons-wrapper-calendar .tribe-events-button:not(.tribe-events-button-external):focus {
    background-color: var(--e-global-color-primary) !important;
    color: var(--e-global-color-theme_color_alt_title) !important;
    border-color: var(--e-global-color-primary) !important;
}

/* Make "More Info" button secondary/outlined style (only in event wrapper) */
.event-buttons-wrapper > .trx-addons-posts-button:not(.event-external-button-listing) {
    background: none !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: var(--theme-color-link) !important;
    color: var(--theme-color-link) !important;
}

.event-buttons-wrapper > .trx-addons-posts-button:not(.event-external-button-listing):hover,
.event-buttons-wrapper > .trx-addons-posts-button:not(.event-external-button-listing):focus {
    background-color: var(--e-global-color-primary) !important;
    color: var(--e-global-color-theme_color_alt_title) !important;
    border-color: var(--e-global-color-primary) !important;
}

/* Make external button primary/solid style */
.event-external-button-listing {
    background-color: var(--theme-font-button_background-color, var(--theme-color-link)) !important;
    border-color: var(--theme-font-button_border-color, var(--theme-color-link)) !important;
    color: var(--theme-font-button_color, var(--theme-color-bg_color)) !important;
    text-decoration: none;
}

.event-external-button-listing:hover,
.event-external-button-listing:focus {
    background-color: var(--theme-font-button_background-color-hover, var(--theme-color-hover)) !important;
    border-color: var(--theme-font-button_border-color-hover, var(--theme-color-hover)) !important;
    color: var(--theme-font-button_color-hover, var(--theme-color-bg_color)) !important;
}

/* Single event page buttons */
.tribe-events-button-external {
    background-color: var(--theme-font-button_background-color, var(--theme-color-link)) !important;
    border-color: var(--theme-font-button_border-color, var(--theme-color-link)) !important;
    color: var(--theme-font-button_color, var(--theme-color-bg_color)) !important;
    text-decoration: none;
}

.tribe-events-button-external:hover,
.tribe-events-button-external:focus {
    background-color: var(--theme-font-button_background-color-hover, var(--theme-color-hover)) !important;
    border-color: var(--theme-font-button_border-color-hover, var(--theme-color-hover)) !important;
    color: var(--theme-font-button_color-hover, var(--theme-color-bg_color)) !important;
}

/* =EVENT CALENDAR VIEWS
------------------------------------------------------------ */
/* Event title links hover states */
.tribe-events-calendar-list__event-title-link,
.tribe-events-calendar-day__event-title-link,
.tribe-events-calendar-month__calendar-event-title-link {
    transition: color 0.3s ease;
}

.tribe-events-calendar-list__event-title-link:hover,
.tribe-events-calendar-day__event-title-link:hover,
.tribe-events-calendar-month__calendar-event-title-link:hover {
    color: var(--e-global-color-accent) !important;
}

/* Ensure month view event links are clickable */
.tribe-events-calendar-month__calendar-event-title-link {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* Remove background color on datepicker button hover */
.tribe-events-c-top-bar__datepicker-button:hover,
.tribe-events-c-top-bar__datepicker-button:focus {
    background-color: transparent !important;
    background: none !important;
}


/* =RESPONSIVE STYLES
------------------------------------------------------------ */

/* Tablet and Desktop (768px and up) */
@media (min-width: 768px) {
    .post_info {
        min-width: 335px;
    }
}

/* Desktop (1025px and up) */
@media (min-width: 1025px) {
    .tribe-events-single-event-description.tribe-events-content {
        max-width: 75%;
    }
}

/* Tablet (768px to 1024px) */
@media (max-width: 1024px) {
    /* Layout */
    .post_inner {
        flex-direction: column;
        gap: 32px;
    }
    
    .post_img {
        flex: 0 0 auto;
        max-width: 100%;
        order: 2;
    }
    
    .post_info {
        order: 1;
    }
    
    /* Meta details box */
    .tribe-events-meta-group.tribe-events-meta-group-details {
        padding: 25px;
    }
    
    /* Typography */
    .tribe-events-meta-group dl dt {
        font-size: 14px;
    }
    
    .tribe-events-meta-group .tribe-event-tags-label {
        font-size: 14px;
    }
    
    .tribe-events-schedule.tribe-clearfix .tribe-event-date-start {
        font-size: 16px;
    }
    
    /* Buttons */
    .event-external-button {
        margin-top: 25px;
        gap: 20px;
    }
    
    /* Calendar dropdown */
    .tribe-events-c-subscribe-dropdown {
        margin-top: 25px !important;
        margin-bottom: 0 !important;
    }
}

/* Mobile (up to 767px) */
@media (max-width: 767px) {
    /* Layout */
    .post_inner {
        gap: 25px;
    }
    
    /* Typography */
    .tribe-events-meta-group dl dt {
        font-size: 12px;
    }
    
    .tribe-events-meta-group dl dd,
    .tribe-events-meta-group dl dd a {
        font-size: 18px;
    }
    
    .tribe-events-meta-group .tribe-event-tags-label {
        font-size: 12px;
    }
    
    .tribe-events-schedule.tribe-clearfix .tribe-event-date-start {
        font-size: 15px;
    }
    
    /* Buttons */
    .event-external-button {
        margin-top: 20px;
        gap: 20px;
        flex-wrap: wrap;
    }
    
    .event-external-button .tribe-events-button {
        flex-basis: 100%;
        width: 100%;
        text-align: center !important;
    }
    
    .event-buttons-wrapper {
        width: 100% !important;
    }
    
    .event-buttons-wrapper .trx-addons-posts-button {
        width: 100% !important;
        align-self: stretch !important;
    }
    
    .trx-addons-posts-item-thumbnail {
        width: 100% !important;
    }
    
    .trx-addons-posts-item-title-wrap {
        width: 100% !important;
    }
    
    /* Calendar dropdown */
    .tribe-events-c-subscribe-dropdown {
        margin-top: 20px !important;
        margin-bottom: 0 !important;
    }

    .tribe-common-c-btn-border.tribe-events-c-subscribe-dropdown__button {
        width: 100% !important;
    }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
    .event-external-button {
        flex-direction: column;
    }
    
    .event-external-button .tribe-events-button {
        width: 100%;
    }
}