/*
Driving At Night custom theme.
Bill Borman 2025
*/

/*	Global reset	*/
* {margin: 0; padding: 0; border: none; box-sizing: border-box;}

/*	Background	*/
html, body {
background-color: rgb(0,0,0);
background-image: url('images/background.png');
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
color: #eeeeee;
}

/*	Colours	*/


a,
a:link,
a:visited,
a:active,
code,
dt,
h2,
h3,
h4,
h5, 
#title span {
	color: #dab154; /* Accent colour */
} 

body {
	color: #fdf7d1; /* Text colour */
} 

a:hover {
	color: #7a7db5; /* Hover colour */
} 

/* Font stuff */
body, input, textarea {
    font:14px "Kanit",sans-serif;
	font-weight: 300;
    line-height:22px;
}


h1 {
	color:#dab154;
    font-size:28px;
    font-weight: 800;
    line-height:26px;
    padding: 10px 0 2px 0; /* top right bottom left */
	margin-bottom: 15px;
	text-decoration:none;
	text-transform: uppercase;
}

h2 {
    color:#dab154;
    font-size:24px;
    font-weight: 800;
    line-height:22px;
    padding: 12px 0 2px 0;
	margin-bottom: 12px;
	text-decoration:none;
	text-transform: uppercase;
}

h3 {
    color:#dab154;
    font-size:18px;
    font-weight: 800;
    line-height:15px;
    padding:2px 0 2px 0;
	text-decoration:none;
	text-transform: uppercase;
}

h1 a, h2 a, h3 a, h4 a {
   color:#001147;
}

h1 a:active, h1 a:hover, h2 a:active, h2 a:hover, h3 a:active, h3 a:hover, h4 a:active, h4 a:hover  {
    color:#1f74c5;	
}

h1.entry-title {
	padding:0 0 2px 0; /* Different padding for entry H1s */
	border-bottom: 1px dashed #aaccff;
	margin-bottom: 2px;
}

h2.entry-title {
	padding:0 0 2px 0; /* Different padding for entry H1s */
	border-bottom: 1px dashed #aaccff;
	margin-bottom: 2px;
}

h1.less-margin, h2.less-margin {
	padding:8px 0 4px 0;
	margin-bottom: 2px;
}

p.divider {
	color:#555555;
}


/* Spacing for paragraphs */
p  {
	margin-bottom: 1.0em;
}

pre {
	overflow:auto;
	width:auto;
	border:solid gray;
	border-width:.1em .1em .1em .4em;
	padding:.2em .6em;
}

hr {
  border-top: 1px dashed #cccccc;
  width: 100%;
}

/* Navigation */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
  border-right: 1px dashed #aaccff;
}

li:last-child {
  border-right: none;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
}

li a:hover {
  background-color: #ccddff;
}

/* IDs */

#maincontainer {
	min-height: 100dvh;         /* full viewport height */
	margin:0 auto;
	width: clamp(95%, 85vw, 85%);
	max-width:900px;
	overflow:hidden;		/* This chops off any overhanging divs */
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;	
	display: flex;
	flex-direction: column;
}

#main {
	margin: 0 auto;
	padding: 32px;
	text-align: center;
	width:100%;
	max-width:700px;
    font-size:16px;
	flex: 1 0 auto; /* Fill remaining screen height */
	background: rgba(0,0,0,0.75);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
}

#main .left-text {
	text-align: start; /* 'start' = left in LTR, right in RTL */
} 

#header {
	clear:both;
	width:100%;
	text-align: center;
	margin-top: 20px;
	margin-bottom: -7.5%;
}

#header img {
	max-width: 100%;
	height: auto;
}

#links {
	clear:both;
	width:100%;
	max-width: 400px;
	margin: 0.75rem auto 1.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 0.75rem 0;
}

#links a,
.post-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.85rem;
  border-radius: 10rem;
  border: 1px solid #dab154;
  color: #dab154;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, transform .05s ease;
}

#links a:hover,  .post-nav a:hover  { background: rgba(218,177,84,.15); }
#links a:active, .post-nav a:active { transform: translateY(1px); }
#links a:focus-visible, .post-nav a:focus-visible { outline: 2px solid #dab154; outline-offset: 2px; }

#footer {
	clear:both;
	width:100%;
	text-align: center;
	color:#555555;
	font-size:14px;
}

#quote, #quote-small {
	margin: 0 auto 1em;
	text-align: center;
	width:100%;
	max-width:500px;
	color:#9fa0b5;
    font-size:14px;
	font-style:italic;
}

#quote {
	white-space:pre; /* Preserve white space so we don't have to use $nbsp; */
	overflow-x: auto;
}

#quote-small { display: none; }

@media (max-width: 575px) {
	#quote       { display: none; }
	#quote-small { display: block; }
}

/* News/Blog posts */
.post {
	margin-bottom: 1.5em;
	padding: 1.25em;
	background: rgba(255,255,255,0.05);
	border-left: 3px solid #dab154;
	text-align: left;
}

.post-date {
	font-size: 16px;
	margin-bottom: 0.5em;
	padding: 0;
}

.post h3 {
	color: #9fa0b5;
	font-size: 18px;
	font-weight: 500;
	margin-bottom: 0.5em;
	text-decoration:none;
	text-transform: uppercase;
}

.post img {
	display: block;
	margin: 1em auto;
	max-width: 100%;
	height: auto;
}

.post ul {
	list-style-type: disc;
	margin: 0 0 1em 1.5em;
	padding: 0;
	overflow: visible;
}

.post li {
	float: none;
	border-right: none;
	margin-bottom: 0.35em;
}

.post li a {
	display: inline;
	padding: 0;
	text-align: left;
}

.video-embed {
	position: relative;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 16 / 9;
	margin: 1em auto;
}

.video-embed iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}

.media-video {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
}

/* News link list (index page) */
.news-link-list {
	text-align: left;
	margin-bottom: 1em;
}

.news-link-list a {
	display: block;
	padding: 0.75em 1em;
	margin-bottom: 0.5em;
	background: rgba(255,255,255,0.05);
	border-left: 3px solid #dab154;
	text-decoration: none;
	transition: background-color .15s ease;
}

.news-link-list a:hover {
	background: rgba(255,255,255,0.10);
}

.news-link-title {
	display: block;
	color: #dab154;
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.3;
}

.news-link-date {
	display: block;
	color: #9fa0b5;
	font-size: 14px;
	margin-top: 0.2em;
}

/* Post page navigation */
.post-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.75rem clamp(0px, 2vw, 1.25rem);
	margin: 1.5em 0;
}

.post-nav > :nth-child(1) { justify-self: start; }
.post-nav > :nth-child(2) { justify-self: center; }
.post-nav > :nth-child(3) { justify-self: end; }