/*
Theme Name: MH child
Theme URI:
Description: MH Magazine child theme for staging site
Author: magpie
Author URI: https://magpie.ae
Template: mh-magazine
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Custom styles */

/* Agenda-inspired colour palette */
:root {
	--magpie-page-bg: #121212;
	--magpie-card-bg: #d9d5cf;
	--magpie-text: #333333;
	--magpie-accent: #BE17A6;
	--magpie-light-text: #ffffff;
}

/* Single event page */

body.single-tribe_events {
	background-color: var(--magpie-page-bg);
}

/* Main event container */
.magpie-single-event {
	max-width: 980px;
	margin: 0 auto;
	padding: 40px 20px 72px;
	color: var(--magpie-light-text);
}

/* Category button */
.magpie-event-category {
	display: inline-block;
	margin: 0 0 14px;
	padding: 7px 13px;
	background: var(--magpie-accent);
	border-radius: 999px;
	color: var(--magpie-light-text);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.magpie-event-category:hover,
.magpie-event-category:focus {
	background: #971184;
	color: var(--magpie-light-text);
	text-decoration: none;
}

/*
 * CATEGORY COLOUR TO EXPERIMENT WITH:
 * Change --magpie-accent in the :root block at the top of style.css.
 *
 * Example:
 * --magpie-accent: #be17a6;
 */

/* Event title */
.magpie-event-title {
	margin: 0 0 16px;
	color: var(--magpie-accent);
	font-size: 52px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
}

/*
 * TITLE COLOUR TO EXPERIMENT WITH:
 * It currently uses var(--magpie-accent).
 *
 * To give the title an independent colour, change the line above to:
 * color: #be17a6;
 *
 * Then replace #be17a6 with any colour you want to test.
 */

.magpie-event-date {
	margin: 0 0 30px;
	color: var(--magpie-light-text);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
}

.magpie-event-date__separator {
	display: inline-block;
	margin: 0 7px;
}

/* Description card */
.magpie-event-description-card {
	margin: 0 0 20px;
	padding: 18px;
	background: var(--magpie-card-bg);
	border-radius: 22px;
	color: var(--magpie-text);
}

.magpie-event-description-card--has-image {
	display: flex;
	align-items: stretch;
}

/* Description takes the left half of the card */
.magpie-event-description {
	box-sizing: border-box;
	width: 100%;
	padding: 12px;
	font-size: 18px;
	line-height: 1.55;
}

.magpie-event-description-card--has-image .magpie-event-description {
	width: 50%;
	padding-right: 22px;
}

.magpie-event-description p:first-child {
	margin-top: 0;
}

.magpie-event-description p:last-of-type {
	margin-bottom: 0;
}

/*
 * Image option B:
 * Image has a beige border around it (the card padding), plus
 * rounded corners on every side. Its box fills the right 50%.
 */
.magpie-event-image {
	box-sizing: border-box;
	width: 50%;
	min-height: 260px;
	overflow: hidden;
	border-radius: 14px;
}

.magpie-event-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Event web link: inside description card */
.magpie-event-web-link {
	display: inline-flex;
	align-items: center;
	margin-top: 22px;
	padding: 10px 14px;
	background: var(--magpie-accent);
	border-radius: 999px;
	color: var(--magpie-light-text);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none;
}

.magpie-event-web-link__icon {
	margin-left: 8px;
	font-size: 17px;
	line-height: 0.8;
}

.magpie-event-web-link:hover,
.magpie-event-web-link:focus {
	background: #971184;
	color: var(--magpie-light-text);
	text-decoration: none;
}

/*
 * Alternative: icon-only web link.
 *
 * When you decide that you prefer an icon rather than “WEB LINK”,
 * add this class in the PHP link:
 *
 * class="magpie-event-web-link magpie-event-web-link--icon-only"
 *
 * Then this CSS makes it a circular arrow button.
 */
.magpie-event-web-link--icon-only {
	width: 38px;
	height: 38px;
	margin-top: 20px;
	padding: 0;
	justify-content: center;
	border-radius: 50%;
}

.magpie-event-web-link--icon-only .magpie-event-web-link__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.magpie-event-web-link--icon-only .magpie-event-web-link__icon {
	margin-left: 0;
}

/* Compact venue strip */
.magpie-event-venue-strip {
	margin: 0;
	padding: 12px 18px;
	background: var(--magpie-card-bg);
	border-radius: 999px;
	color: var(--magpie-text);
	font-size: 14px;
	line-height: 1.4;
}

.magpie-event-venue-name {
	color: var(--magpie-text);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

a.magpie-event-venue-name:hover,
a.magpie-event-venue-name:focus {
	color: var(--magpie-accent);
	text-decoration: underline;
}

.magpie-event-venue-separator {
	display: inline-block;
	margin: 0 7px;
}

.magpie-event-venue-address {
	font-size: 14px;
}

/* Mobile layout */
@media screen and (max-width: 700px) {
	.magpie-single-event {
		padding: 28px 16px 56px;
	}

	.magpie-event-title {
		font-size: 36px;
		line-height: 1.05;
	}

	.magpie-event-date {
		font-size: 16px;
	}

	.magpie-event-description-card--has-image {
		display: block;
	}

	.magpie-event-description-card--has-image .magpie-event-description,
	.magpie-event-image {
		width: 100%;
	}

	.magpie-event-description-card--has-image .magpie-event-description {
		padding-right: 12px;
	}

	.magpie-event-image {
		min-height: 220px;
		margin-top: 10px;
	}

	.magpie-event-description {
		padding: 12px;
		font-size: 17px;
	}

	.magpie-event-venue-strip {
		border-radius: 16px;
	}

	.magpie-event-venue-separator {
		margin: 0 5px;
	}
}
/* Venue strip now sits below date/time and above the description card */
.magpie-event-header {
	margin-bottom: 0;
}

.magpie-event-venue-strip {
	margin: 0 0 20px;
}

/* Smaller description type and three-quarter-line paragraph spacing */
.magpie-event-description {
	font-size: 16px;
}

.magpie-event-description p {
	margin-top: 0;
	margin-bottom: 0.75em;
}

.magpie-event-description p:last-child {
	margin-bottom: 0;
}

/* Back to Agenda */
.magpie-event-back-to-agenda {
	display: inline-block;
	margin: 0 0 28px;
	padding: 11px 18px;
	border: 1px solid var(--magpie-card-bg);
	border-radius: 999px;
	color: var(--magpie-light-text);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.magpie-event-back-to-agenda:hover,
.magpie-event-back-to-agenda:focus {
	background: var(--magpie-card-bg);
	color: var(--magpie-text);
	text-decoration: none;
}
/* Ensure event links sit above any overlapping theme layer */
.magpie-event-venue-strip,
.magpie-event-description-card,
.magpie-event-back-to-agenda {
	position: relative;
	z-index: 5;
}

.magpie-event-venue-name,
.magpie-event-web-link,
.magpie-event-back-to-agenda {
	position: relative;
	z-index: 6;
	pointer-events: auto;
	cursor: pointer;
}

/* WEB LINK: slightly smaller label and larger, baseline-aligned arrow */
.magpie-event-web-link {
	display: inline-flex;
	align-items: center;
}

.magpie-event-web-link__label {
	font-size: 11px;
	line-height: 1;
}

.magpie-event-web-link__icon {
	display: inline-block;
	margin-left: 7px;
	font-size: 21px;
	line-height: 1;
	transform: translateY(-1px);
}
/* Venue name: keep it clickable without an underline */
.magpie-event-venue-name,
.magpie-event-venue-name:hover,
.magpie-event-venue-name:focus {
	text-decoration: none;
}

/* Separate title colour from button/accent colour */
.magpie-event-title {
	color: #5fc3e4;
}

/* Make WEB LINK match Back to Agenda button height more closely */
.magpie-event-web-link {
	min-height: 38px;
	box-sizing: border-box;
	padding: 11px 18px;
}

.magpie-event-web-link__label {
	font-size: 12px;
	line-height: 1;
}

.magpie-event-web-link__icon {
	margin-left: 6px;
	font-size: 16px;
	line-height: 1;
	transform: translateY(-1px);
}
/* Compact WEB LINK button */
.magpie-event-web-link {
	min-height: 0;
	padding: 7px 14px;
	font-size: 12px;
}

.magpie-event-web-link__label {
	font-size: 11px;
	line-height: 1;
}

.magpie-event-web-link__icon {
	margin-left: 5px;
	font-size: 15px;
	line-height: 1;
	transform: translateY(-1px);
}

/* Larger WEB LINK arrow, aligned centrally with unchanged text */
.magpie-event-web-link {
	display: inline-flex;
	align-items: center;
}

.magpie-event-web-link__icon {
	transform: translateY(-1px);
}
/* Agenda page: event title colour */
.magpie-event-title {
	color: #5fc3e4;
	text-decoration: none;
}

/* Agenda page: event title hover – no underline, magenta colour */
.magpie-event-title:hover {
	color: #be17a6;
	text-decoration: none;
}

/* Agenda page: bring “Find events” button right up against the input */
.magpie-event-filters__submit,
.magpie-event-filters__submit:hover,
.magpie-event-filters__submit:focus {
	margin-left: 8px;
}

/* Optional: ensure no extra gap from the input itself */
.magpie-event-filters__search {
	margin-right: 0;
}
/* Agenda page: event title colour */
.tribe-events-calendar-list__event-title-link,
.tribe-events-calendar-list__event-title-link:visited {
	color: #5fc3e4;
	text-decoration: none;
}

/* Agenda page: event title hover – no underline, magenta colour */
.tribe-events-calendar-list__event-title-link:hover,
.tribe-events-calendar-list__event-title-link:focus {
	color: #be17a6;
	text-decoration: none;
}

/* Agenda page: bring “Find Events” button right up against the search box */
.tribe-events-c-search__button {
	margin-left: 8px;
}

/* Optional: remove any right margin on the search input itself */
.tribe-events-c-search__input,
.tribe-events-c-search input[type="text"],
.tribe-events-c-search input[type="search"] {
	margin-right: 0;
}
/* === GLOBAL H1 STYLING === */
h1,
.page-title,
.entry-title,
.entry-content h1 {
    font-family: "DM Sans", Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 40px !important;
    text-indent: 0px !important;
    margin: 20 0 24px 0 !important;
    padding-top: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
/* Smaller post titles on single posts */
.single .entry-title,
.single-post .entry-title,
.single-post h1.entry-title {
  font-size: 40px !important;
  line-height: 50px !important; /* optional, adjust to taste */
  margin: 40 0 24px 0 !important;
    
}
/* === AGENDA: indent events list to match title === */
.post-type-archive-tribe_events .tribe-events-calendar-list,
.post-type-archive-tribe_events .tribe-events-calendar-list__event,
.post-type-archive-tribe_events .tribe-events-calendar-list__event-title {
    padding-left: 0px !important;
    margin-left: 0 !important;
}
/* Agenda page: style Previous/Next navigation */
/* Agenda pagination container */
.tribe-events-c-nav {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

/* Base button style for prev/next */
.tribe-events-c-nav__prev,
.tribe-events-c-nav__next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: #BE17A6;
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 14px;
  border: 1px solid #BE17A6;
}

/* Hover/focus state */
.tribe-events-c-nav__prev:hover,
.tribe-events-c-nav__next:hover,
.tribe-events-c-nav__prev:focus,
.tribe-events-c-nav__next:focus {
  background: #9b1288;
  border-color: #9b1288;
  color: #ffffff !important;
}

/* Hide the built-in SVG arrows */
.tribe-events-c-nav__prev-icon-svg,
.tribe-events-c-nav__next-icon-svg {
  display: none !important;
}

/* Hide the plural "Events" text */
.tribe-events-c-nav__prev-label-plural,
.tribe-events-c-nav__next-label-plural {
  display: none !important;
}

/* Insert solid triangular arrows via CSS */
.tribe-events-c-nav__prev::before {
  content: "◀";
  font-weight: 700;
  margin-right: 6px;
}

.tribe-events-c-nav__next::after {
  content: "▶";
  font-weight: 700;
  margin-left: 6px;
}
/* Completely hide the "Subscribe to calendar" dropdown and button */
.tribe-events-c-subscribe-dropdown__container,
.tribe-events-c-subscribe-dropdown,
.tribe-events-c-subscribe-dropdown__button,
.tribe-events-c-subscribe-dropdown__button-text,
.tribe-events-c-subscribe-dropdown__content,
.tribe-events-c-subscribe-dropdown__list {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Event price on single event pages: same size as date/time, accent colour */
.magpie-event-date__price {
  font-size: inherit;        /* same as date/time */
  font-weight: inherit;
  color: #BE17A6;            /* accent colour */
  margin-left: 4px;
}