<?php

/**
 * The template for displaying all single event posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package UIU_CSE
 */

get_header(); ?>
<?php while (have_posts()) : the_post(); ?>

	<main id="main" class="site-main" role="main">

		<div class="sections">

			<section id="event-single-header" class="container">
				<h5>Event</h5>
				<h1><?php echo get_the_title(); ?></h1>

				<p class="subtext">
					<strong>Venue: </strong><?php the_field('event_venue'); ?>
				</p>

				<span class="news-date single"><?php the_field('news_date'); ?></span>

				<span class="event-published-date">Duration: <?php the_field('event_date_start'); ?> to <?php the_field('event_date_end'); ?></span>

				<hr>

				<div class="event-socials">
					<div>
						SHARE:
						<a href="#" class="social-icons"><i class="fa-brands fa-facebook-f"></i></a>
						<a href="#" class="social-icons"><i class="fa-brands fa-twitter"></i></a>
						<a href="#" class="social-icons"><i class="fa-brands fa-linkedin-in"></i></a>
					</div>

				</div>
			</section>

			<section id="news-single-header" class="container">
				<div class="news-single-body">
					<div class="article-cover-image">
						<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
						<span class="img-caption"> </span>
					</div>
					<div class="article">
						<?php echo get_the_content(); ?>
					</div>
					<hr>
				</div>

			</section>
		</div>

	</main>

<?php endwhile; ?>
<style>
	footer.container-fluid {
		margin-top: 80px;
	}
	p {
		max-width: 100% !important;
	}

	header {
		height: 100px !important;
	}

	#event-single-header .event-date {
		font-size: 16px;
		color: #2F4858;
		display: block;
		margin-bottom: 30px;
	}

	#event-single-header h1 {
		color: #000 !important;
		font-family: "DM Serif Text", serif;
		margin-bottom: 10px !important;
	}

	#event-single-header h5 {
		margin-top: 30px;
		font-size: 30px;
		color: #2F4858;
	}

	#event-single-header .subtext {
		font-size: 22px !important;
		color: #2F4858 !important;
	}

	#event-single-header .event-published-date {
		display: block;
		color: #485680;
		font-weight: 800;
		font-size: 14px;
	}

	.event-socials {
		margin: 20px 20px !important;
		font-size: 26x;
	}

	.event-socials a {
		margin: 0px 15px;
	}

	.social-icons {
		color: #2F4858;
	}

	.event-single-body {
		max-width: 900px !important;
		margin: 30px auto !important;
	}

	.event-single-body p {
		text-align: justify;
		font-size: 18px;
		color: #2F4858 !important;
	}

	.event-single-body ul li {
		list-style: none;
		color: #2F4858;
		font-size: 16px;
	}

	.event-single-body h3 {
		font-family: "DM Serif Text", serif;
		font-size: 26px;
		color: #2F4858;
	}

	.event-single-body .event-image img {
		width: 100%;
		margin-bottom: 30px;
	}

	.img-caption {
		font-size: 14px;
		color: #475481 !important;
		line-height: 14px;
	}

	/*# sourceMappingURL=single-event.css.map */
</style>
<?php get_footer(); ?>