/*
Theme Name:   Chapel Allerton Runners
Theme URI:    https://chapelallertonrunners.co.uk
Description:  Child theme of Customizr for Chapel Allerton Runners. Club green styling plus members-only protection for the events section.
Author:       Chapel Allerton Runners
Template:     customizr
Version:      1.1.0
License:      GNU General Public License v2 or later
Text Domain:  carc
*/

/* ===============================================================
   1. Club palette
   Sampled from the existing Ning site. Change a value here and it
   updates everywhere below.
   =============================================================== */

:root {
	--carc-green-top:     #128F1C; /* top of the header gradient  */
	--carc-green-bottom:  #01905A; /* foot of gradient + nav bar  */
	--carc-green-link:    #00915D; /* links                       */
	--carc-green-heading: #2F9C30; /* headings                    */
	--carc-green-dark:    #016B43; /* hover / pressed states      */
	--carc-ink:           #1D1D1D; /* body text                   */
	--carc-rule:          #E2E6E2; /* hairline dividers           */
}

/* ===============================================================
   2. Typography
   The Ning site uses Century Gothic, which isn't a web font.
   Poppins is the closest freely licensed match: same geometric
   skeleton, single-storey 'a', circular bowls.
   =============================================================== */

body,
button,
input,
select,
textarea,
.tc-header .brand,
.navbar .nav > li > a {
	font-family: 'Poppins', 'Century Gothic', 'Questrial', sans-serif;
}

body {
	color: var(--carc-ink);
	font-size: 16px;
	line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title {
	font-family: 'Poppins', 'Century Gothic', sans-serif;
	font-weight: 700;
	color: var(--carc-green-heading);
	letter-spacing: 0.01em;
}

h1, h2 {
	text-transform: uppercase;
	font-weight: 800;
}

/* Sidebar widget headings sit in black on the Ning site, not green. */
.widget-title {
	color: var(--carc-ink);
	font-size: 1.05rem;
	text-transform: uppercase;
}

/* ===============================================================
   3. Header band
   Vertical gradient running yellow-green through to teal-green,
   with the badge centred on it.
   =============================================================== */

.tc-header,
.tc-header.tc-sticky-header,
#tc-header,
.navbar-wrapper {
	background: linear-gradient(
		to bottom,
		var(--carc-green-top) 0%,
		var(--carc-green-bottom) 100%
	);
	border-bottom: 0;
	box-shadow: none;
}

.tc-header .brand,
.tc-header .brand a,
.tc-header .site-title,
.tc-header .site-description {
	color: #FFFFFF;
	text-align: center;
	float: none;
}

.tc-header .brand img,
.tc-header .site-logo img {
	display: block;
	margin: 0 auto;
	max-height: 260px;
	width: auto;
}

/* ===============================================================
   4. Navigation
   Flat green bar, uppercase, light weight, wide letter-spacing.
   =============================================================== */

.navbar-inner,
.tc-header .navbar-inner,
.nav-collapse,
.tc-header .navbar {
	background: var(--carc-green-bottom);
	background-image: none;
	border: 0;
	box-shadow: none;
}

.tc-header .navbar .nav > li > a,
.tc-header .nav-collapse .navbar-nav > li > a,
.navbar .nav > li > a {
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 0.86rem;
	letter-spacing: 0.09em;
	text-shadow: none;
	padding: 1rem 1.15rem;
}

.tc-header .navbar .nav > li > a:hover,
.tc-header .navbar .nav > li > a:focus,
.navbar .nav > .current-menu-item > a,
.navbar .nav > .current_page_item > a {
	color: #FFFFFF;
	background: rgba(0, 0, 0, 0.16);
}

/* Keyboard users need to see where they are. */
.tc-header .navbar .nav > li > a:focus-visible,
a:focus-visible,
button:focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: 2px;
}

a:focus-visible {
	outline-color: var(--carc-green-dark);
}

/* ===============================================================
   5. Links and buttons
   =============================================================== */

a,
#content a,
.entry-content a {
	color: var(--carc-green-link);
}

a:hover,
a:focus {
	color: var(--carc-green-dark);
}

.btn,
.btn-primary,
input[type="submit"],
button[type="submit"] {
	background: var(--carc-green-link);
	background-image: none;
	border: 0;
	border-radius: 4px;
	color: #FFFFFF;
	text-shadow: none;
	padding: 0.6rem 1.4rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.btn:hover,
.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background: var(--carc-green-dark);
	color: #FFFFFF;
}

/* ===============================================================
   6. Content
   =============================================================== */

#main-wrapper,
#content,
.tc-content {
	background: #FFFFFF;
}

/* Centred body copy, as on the Ning site.
   Long centred paragraphs are harder to read because the eye loses
   the start of each line. Delete this block to go left-aligned. */
.entry-content,
.entry-content p,
.page .entry-content {
	text-align: center;
}

.entry-content ul,
.entry-content ol {
	display: inline-block;
	text-align: left;
}

hr,
.entry-content hr {
	border-color: var(--carc-rule);
}

/* ===============================================================
   7. Events and member screens
   Tones down Events Manager's default styling to match the club look.
   =============================================================== */

.em-booking-form input[type="submit"],
.em-booking-submit {
	background: var(--carc-green-link);
	border: 0;
	color: #FFFFFF;
}

.em-calendar td.eventless-today,
.em-calendar .eventful a {
	color: var(--carc-green-link);
}

.em-event-booking-form h3,
.em-bookings-table caption {
	color: var(--carc-green-heading);
}

/* ===============================================================
   8. Footer
   =============================================================== */

#footer,
.colophon,
#footer .colophon {
	background: var(--carc-green-bottom);
	color: #FFFFFF;
	border-top: 0;
}

#footer a,
.colophon a {
	color: #FFFFFF;
	text-decoration: underline;
}

/* ===============================================================
   9. Small screens
   =============================================================== */

@media (max-width: 767px) {

	.tc-header .brand img,
	.tc-header .site-logo img {
		max-height: 150px;
	}

	.tc-header .navbar .nav > li > a,
	.navbar .nav > li > a {
		letter-spacing: 0.05em;
		padding: 0.75rem 1rem;
	}

	.entry-content,
	.entry-content p {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {

	* {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}