#nohsa-calendar-container, #calendar-outer {
	width: 100%;    max-width: 1200px;
}
#calendar-outer ul {
	margin: 0px;
	padding: 0px;
}

#calendar-outer ul li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

#nohsa-calendar-container .prev {
	display: inline-block;
	float: left;
	cursor: pointer
}

#nohsa-calendar-container .next {
	display: inline-block;
	float: right;
	cursor: pointer
}

#nohsa-calendar-container :focus {
	outline: none;
}

div.calendar-nav {
	background-color: var(--wp--preset--color--red);
	border-radius: 4px;
	text-align: center;
	padding: 10px;
	color: #FFF;
	box-sizing: border-box;
	font-weight: bold;
}

#body-overlay {background-color: rgba(0, 0, 0, 0.6);z-index: 999;position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: none;}
#body-overlay div {position:absolute;left:50%;top:50%;margin-top:-32px;margin-left:-32px;}

#nohsa-calendar-container, #calendar-outer {
    width: 100%;    
    max-width: 1200px;
}

#calendar-outer ul {
    margin: 0px;
    padding: 0px;
}

/* Removed li styles */ 

#nohsa-calendar-container .prev {
    display: inline-block;
    float: left;
    cursor: pointer
}

#nohsa-calendar-container .next {
    display: inline-block;
    float: right;
    cursor: pointer
}

#nohsa-calendar-container :focus {
    outline: none;
}

div.calendar-nav {
    background-color: var(--wp--preset--color--red);
    border-radius: 4px;
    text-align: center;
    padding: 10px;
    color: #FFF;
    box-sizing: border-box;
    font-weight: bold;
}

#calendar-outer .week-name-title th { /* This still uses <li> */
    display: table-cell; 
    color: var(--wp--preset--color--red);
    font-size: 0.95em;
    font-weight: 600;
    width: 14.2857%; 
    padding: .5em 0;
    text-align: center;
    border: solid 1px #fff;
}

/* Styles for table cells (previously for list items) */
#calendar-outer table {
    width: 100%;
    max-width: 100%;  /* Ensures table does not exceed the boundary of its container */
    table-layout: fixed; /* Helps in maintaining column width uniformity */
    border-collapse: collapse; /* Ensures borders are shared between cells */
}
#calendar-outer td { 
    display: table-cell; 
    overflow:hidden;
    table-layout:unset;
    height:150px;
    width: 14.2857%; 
    width:auto;
    text-align: left;
    line-height: 1;
    vertical-align: top; 
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    border: 1px solid var(--wp--preset--color--charcoal);
    border-radius: 4px;
    font-size: 1.2em;
    padding: 6px; 
    box-sizing: border-box; 
}

#calendar-outer td.today { /* Changed from .week-day-cell li.today */
    background-color:#f0eeee;
}


#calendar-outer td .date {font-size:.75em;margin:3px;line-height: 1.5;}
#calendar-outer td .event-listing {padding:4px 0 0;margin:0 3px 0 0;font-size:.7em}
#calendar-outer td .event-listing a {text-decoration: none;}
#calendar-outer td.past p {opacity:.5}
#calendar-outer td .class-time {font-size:.65em}

/* Let event bars overflow horizontally when we want them to */
#calendar-outer td.day-cell.has-events {
    padding:6px 0;
    overflow:visible;
  }
  #calendar-outer td.day-cell.has-events .date {
    padding-left:6px;
  }
  
  /* Base bar style */
  #calendar-outer .event-bar {
    display:block;
    padding:4px 6px;
    min-height:66px;          /* keep your consistent bar height */
    box-sizing:border-box;
    white-space:nowrap;       /* default = no wrapping, good for multi-day spans */
  }
  
  /* Multi-day bars: extend to the right on start days,
     EXCEPT when the start is Saturday (7th column) */
  #calendar-outer td.day-cell.has-events:not(:nth-child(7)) .event-bar.span-start, #calendar-outer td.day-cell.has-events .span-middle.sunday-label, #calendar-outer td.day-cell.has-events .span-start.sunday-label {
    width:200px;
    position:relative;
    z-index:222;
  }
  
  /* Cases where we WANT wrapping inside the cell:
     1) single-day events
     2) multi-day events that show their label on a Sunday
        (i.e. they extend into a new week)
     3) multi-day events that start on Saturday */
  #calendar-outer .event-bar.single-day,
  #calendar-outer .event-bar.sunday-label,
  #calendar-outer td.day-cell.has-events:nth-child(7) .event-bar.span-start {
    width:100%;
    white-space:normal;       /* allow title/location to wrap */
  }
  
  /* Make title + location stack neatly */
  #calendar-outer .event-bar .event-title,
  #calendar-outer .event-bar .event-location {
    display:block;
  }
  
/* Calendar bar colors match the map markers (see "Calendar bars match map markers" below).
   Event-type colors are used only for the type labels on show pages. */

/* NOHSA event type colors - carrying through to pages */
ul.nohsa-calendar-event-types {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: .5em 0;
    list-style: none;
}
ul.nohsa-calendar-event-types li {padding:.25em;border-radius:12px;margin:.5em;font-size:1rem;text-transform: uppercase;
    font-weight: 600;list-style:none}

li.event-type-pleasure {
    color: var(--wp--preset--color--blue);
}
li.event-type-speed  {
    color: var(--wp--preset--color--red);
}
li.event-type-ranch {
    color: var(--wp--preset--color--gold);
}
li.event-type-hunter-jumper {
    color: #138435;
}
li.event-type-fun {
    color: var(--wp--preset--color--charcoal);
}

li.event-type-cinch {
    color: var(--wp--preset--color--vivid-cyan-blue);
}

/* Simple loading state */
#nohsa-calendar-container.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

#body-overlay {background-color: rgba(0, 0, 0, 0.6);z-index: 999;position: absolute;left: 0;top: 0;width: 100%;height: 100%;display: none;}
#body-overlay div {position:absolute;left:50%;top:50%;margin-top:-32px;margin-left:-32px;}

/* Multi-day event bar styling */
#calendar-outer td .event-bar {
    margin: 2px 0;
    padding: 1em;
    background-color: var(--wp--preset--color--gold, #f2a900);
    color: #000;
    border-radius: 0;
    font-size: 0.7em;
    line-height: 1.2;
    min-height: 66px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Calendar bars match map markers:
   red = submitted show, gold = partner (featured) show, blue = NOHSA sponsored show */
#calendar-outer td .event-bar {
    background-color: var(--wp--preset--color--red);
    color: var(--wp--preset--color--white);
}
#calendar-outer td .event-bar.show-tier-featured {
    background-color: var(--wp--preset--color--gold);
    color: var(--wp--preset--color--black);
}
#calendar-outer td .event-bar.show-tier-sponsored {
    background-color: var(--wp--preset--color--blue);
    color: var(--wp--preset--color--white);
}

#calendar-outer td .event-bar a {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* Rounded ends depending on where we are in the span */
#calendar-outer td .event-bar.span-single {
    border-radius: 4px;
}
#calendar-outer td .event-bar.span-start {
    border-radius: 4px 0 0 4px;
}
#calendar-outer td .event-bar.span-middle {
    border-radius: 0;
}
#calendar-outer td .event-bar.span-end {
    border-radius: 0 4px 4px 0;
}

/* Optional text tweaks */
#calendar-outer td .event-bar .event-title {
    font-weight: 600;
}
#calendar-outer td .event-bar .event-location {
    font-weight: 400;
    display:block;
    font-size:.7em
}
/* --- Month/List toggle controls --- */

.nohsa-calendar-toggle-buttons {
    display: inline-flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    margin-left:auto; /* pushes buttons to right side */
  }
  
  .nohsa-toggle-btn {
    border-radius: 999px;
    border: 2px solid var(--wp--preset--color--blue, #333);
    background: #fff;
    padding: 0.35rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  
  .nohsa-toggle-btn.is-active {
    background: var(--wp--preset--color--blue, #333);
    color: #fff;
  }
  
  .nohsa-calendar-view {
    display: none;
  }
  
  .nohsa-calendar-view.is-active {
    display: block;
  }

  /* Wrapper for filters + toggle buttons */
.nohsa-calendar-controls {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin-bottom: 1rem;
}

/* Filters (left) */
.nohsa-calendar-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
    font-size: .9rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--wp--preset--color--blue);
}

.nohsa-calendar-filters select {
    padding: .5em 1em .5em .2em;
    border-radius: 5px;
    text-align: left;
    outline: solid .5px var(--wp--preset--color--blue);
    background: var(--wp--preset--color--blue);
    color: #fff;
    font-weight: 600;}

/* Map on the main calendar page */
.nohsa-calendar-map {
    width: 100%;
    max-width: 1200px;
    height: 450px;
    margin: 2rem auto;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--wp--preset--color--charcoal);
}

.nohsa-map-info-window a {
    text-decoration: underline;
}

/* Google Map display for single events page */
.nohsa-event-map {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
    margin:2rem auto;
	overflow: hidden;
	margin-block: 1.5rem;
	min-width:100%;
    max-width: 960px;
    border-radius: 1rem;
}
.nohsa-event-map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
    display:block;
}

h3.partner-show {color: var(--wp--preset--color--gold);}

/* For Screen Readers */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}


/*** LIST VIEW ***/
.nohsa-show-list .nohsa-show-list__item {border-bottom:solid 1px var(--wp--preset--color--red) }

/* List view pagination */
.nohsa-show-list__pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 1.5rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--wp--preset--color--charcoal, #444);
}

.nohsa-show-list__pagination[hidden] {
    display: none;
}

.nohsa-pagination-btn {
    border-radius: 999px;
    border: 2px solid var(--wp--preset--color--blue, #1b61ae);
    background: #fff;
    color: var(--wp--preset--color--blue, #1b61ae);
    padding: 0.35rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    min-width: 2.5rem;
    line-height: 1.2;
}

.nohsa-pagination-btn:hover:not([disabled]):not(.is-current) {
    background: var(--wp--preset--color--blue, #1b61ae);
    color: #fff;
}

.nohsa-pagination-btn.is-current {
    background: var(--wp--preset--color--blue, #1b61ae);
    color: #fff;
    cursor: default;
}

.nohsa-pagination-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.nohsa-pagination-ellipsis {
    padding: 0 0.25rem;
    color: var(--wp--preset--color--charcoal, #666);
    user-select: none;
}

/* Media query for smaller screens */
@media screen and (max-width: 768px) {
    #calendar-outer {}
    #calendar-outer table {}
    #calendar-outer td { 
        font-size: 1em; 
        height: 150px;  
    }

    /* Changed selectors from li to td */
    #calendar-outer td .date {
        font-size: 0.6em; 
    }

    #calendar-outer td .event-listing {
        font-size: 0.6em; 
    }
}
@media (max-width: 600px) {
    #calendar-outer td {
        /* Adjust font sizes and padding for smaller screens */
        font-size: 0.8em; 
        padding: 0; 
        overflow: hidden;
        height:unset;
    }

    #calendar-outer td .event-bar {
        min-height: 33px;
        padding:4px 2px !important;
    }

    #calendar-outer td .event-listing {
        font-size: 0.7em; 
        padding: 0;
    }

    #calendar-outer td .class-time {
        font-size: 0.6em;
    }
    /* Stack filters and toggle buttons vertically */    
    .nohsa-calendar-filters select {
           flex: 0 0 calc(50% - 0.5rem); /* 2 items per row, with a little gap */
       }
    /* But let's keep the labels a little shorter on small screens */
    .nohsa-calendar-filters label {
           width:100px;
           padding-left:1em
       }
   
       .nohsa-calendar-filters {
           justify-content: flex-start;
       }
   
       /* Optional: small top margin for the toggle when it wraps below filters */
       .nohsa-calendar-toggle-buttons {
           margin-top: 0.75rem;
       }
}