/* Macedon Hub front end. Inherits the theme's fonts and colours;
   override these variables in the theme to restyle. */
:root {
	--mh-sun: #f5c400;
	--mh-sun-ink: #2a1e00;
	--mh-accent: #b3121b;
	--mh-muted: #6e6862;
	--mh-line: #e2ded9;
	--mh-tile-bg: #fff;
}

/* Language: show one, hide the other. */
[data-mh-lang="mk"] .mh-l-en,
[data-mh-lang="en"] .mh-l-mk { display: none !important; }
html:not([data-mh-lang]) .mh-l-en { display: none; }

.mh-switch { display: inline-flex; border: 2px solid currentColor; border-radius: 999px; overflow: hidden; flex: none; }
.mh-switch button {
	background: transparent; color: inherit; border: 0; padding: 6px 14px; font: inherit; font-weight: 700;
	font-size: 14px; cursor: pointer; min-height: 40px; min-width: 48px;
}
.mh-switch button[aria-pressed="true"] { background: var(--mh-sun); color: var(--mh-sun-ink); }
.mh-switch button:focus-visible { outline: 3px solid var(--mh-accent); outline-offset: -3px; }

/* Grid */
.mh-hub-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.mh-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.mh-topics a {
	text-decoration: none; color: inherit; border: 1px solid var(--mh-line); border-radius: 999px;
	padding: 6px 14px; font-size: 14px; line-height: 1.4;
}
.mh-topics a[aria-current="true"] { background: var(--mh-accent); border-color: var(--mh-accent); color: #fff; }

.mh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.mh-tile { background: var(--mh-tile-bg); border-radius: 12px; overflow: hidden; border: 1px solid var(--mh-line); display: flex; flex-direction: column; }
.mh-tile-media { position: relative; display: block; aspect-ratio: 16 / 9; background: #ece8e3; }
.mh-tile-media:has(.mh-tile-noimg) { aspect-ratio: 4 / 1; }
.mh-tile-media:has(.mh-tile-noimg) .mh-play { display: none; }
.mh-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-tile-noimg { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; color: var(--mh-muted); padding: 12px; text-align: center; }
.mh-play {
	position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
	background: rgba(0, 0, 0, .65);
}
.mh-play::after {
	content: ""; position: absolute; left: 23px; top: 18px;
	border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff;
}
.mh-tile-body { padding: 14px 16px 18px; }
.mh-tile-meta { font-size: 13px; color: var(--mh-muted); margin: 0 0 6px; }
.mh-tile-title { font-size: 18px; line-height: 1.3; margin: 0 0 8px; }
.mh-tile-title a { color: inherit; text-decoration: none; }
.mh-tile-title a:hover { text-decoration: underline; }
.mh-tile-sum { font-size: 15px; line-height: 1.55; margin: 0; }

.mh-pages { display: flex; justify-content: space-between; margin-top: 28px; }
.mh-pages a { font-weight: 700; }
.mh-none { color: var(--mh-muted); }

/* Single item */
.mh-single .mh-switch { margin-bottom: 16px; }
.mh-single-alt { font-size: 1.15em; color: var(--mh-muted); margin-top: 0; }
.mh-single-sum { font-size: 1.1em; line-height: 1.6; }
.mh-embed { margin: 0 0 20px; }
.mh-embed--video { position: relative; aspect-ratio: 16 / 9; }
.mh-embed--video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
.mh-embed--facebook iframe { width: 100%; max-width: 500px; height: 620px; border: 0; display: block; margin: 0 auto; }
.mh-embed--facebook.is-video iframe { height: 480px; }
.mh-figure img { width: 100%; height: auto; border-radius: 10px; }
.mh-btn {
	display: inline-block; background: var(--mh-sun); color: var(--mh-sun-ink) !important; text-decoration: none !important;
	font-weight: 700; padding: 12px 22px; border-radius: 999px;
}

@media (max-width: 640px) {
	.mh-hub-bar { flex-direction: column-reverse; }
	.mh-topics { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; }
	.mh-topics a { white-space: nowrap; }
	.mh-grid { gap: 16px; }
}