/**
 * OHFT Events — minimal layout styles.
 *
 * Deliberately limited to spacing, alignment and image sizing. Colours,
 * fonts and heading styles are left to the active theme so this plugin
 * looks "at home" on whichever site it's activated on, rather than
 * imposing its own visual style.
 */

/* Reset the default list styling on both list wrappers, since the
   markup uses <ul>/<li> for semantic grouping rather than visual bullets. */
.ohft-events-month-list {
	list-style: none;
	margin: 0 0 2em;
	padding: 0;
}

.ohft-events-item {
	margin: 0 0 1.5em;
}

/* Each event item's thumbnail floats left with the title, date and
   excerpt flowing to its right. A float (rather than flexbox) is used
   deliberately here: it keeps the image pinned left regardless of how
   narrow the surrounding column gets (e.g. once a sidebar is present),
   only dropping to a stacked layout at the dedicated small-screen
   breakpoint below — rather than wrapping unpredictably at whatever
   width flex-wrap happens to trigger. */
.ohft-events-item-inner {
	overflow: hidden; /* Clearfix: keeps the article's own border/background (if any) containing the floated image. */
}

.ohft-events-item-image {
	float: left;
	margin: 0 1em 0.5em 0;
}

.ohft-events-item-image img {
	display: block;
	width: 100%;
	max-width: 140px;
	height: auto;
}

.ohft-events-item-content {
	overflow: hidden; /* Establishes a new block formatting context so this column sits beside the float rather than wrapping under it. */
}

/* Below 480px, stack the image above the text instead of floating it —
   at that width a 140px-wide float leaves too little room for the
   heading and excerpt to read comfortably alongside it. */
@media ( max-width: 480px ) {
	.ohft-events-item-image {
		float: none;
		margin: 0 0 0.5em;
	}

	.ohft-events-item-image img {
		max-width: 100%;
	}
}

.ohft-events-item-title {
	margin: 0 0 0.25em;
}

.ohft-events-item-datetime {
	margin: 0 0 0.5em;
}

.ohft-events-item-location {
	display: block;
}

.ohft-events-item-excerpt {
	margin: 0;
}

/* Single event page */
.ohft-event-back-link {
	margin-bottom: 1em;
}

.ohft-event-datetime,
.ohft-event-location {
	margin: 0 0 0.5em;
}

.ohft-event-image img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 600px;
	margin: 1em 0;
}

/* Sidebar blocks (event categories, upcoming events) */
.ohft-events-sidebar-block {
	margin: 0 0 2em;
	background:  #ffffff ;
    border: 1px solid #d8dde0 ;
    border-radius: 4px;
	padding: 30px; 
    overflow: hidden;
    margin-top: 50px;
}


.ohft-events-sidebar-block h2 {
	margin: 0 0 0.5em;
	font-size: 1.5rem;
}

.ohft-events-sidebar-block ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ohft-events-sidebar-block li {
	margin: 0 0 0.75em;
}

.ohft-events-sidebar-upcoming-date {
	display: block;
	font-size: 0.9em;
}

/* Pagination */
.ohft-events-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	margin: 2em 0 0;
	padding: 0;
}

/* A visible focus outline on every keyboard-focusable element the
   plugin renders — required for WCAG 2.2's focus visibility criteria,
   and not something to rely on the theme to provide for plugin markup. */
.ohft-events-list a:focus,
.ohft-event-single-inner a:focus,
.ohft-events-pagination a:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Standard "visually hidden but available to screen readers" pattern,
   used for the extra context added to icon-only or ambiguous links. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}