/* --- Reset / Global Styles --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Masthead & nav spacing fix */
picture,
picture img {
  display: block;      
  margin: 0;
  padding: 0;
  line-height: 0;      
}

.page-wrapper {
  margin-top: 20px; 
  margin-bottom: 40px;
  padding-top: 0;
  padding-left: 15px;
  padding-right: 15px;
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Open Sans", "Lucida Sans", Verdana, Tahoma, sans-serif;
}

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

font {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typography */
p {
  max-width: 530px;
  width: 100%;
  text-align: justify;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 1em;
  color: #000;
  font-family: "Open Sans", "Lucida Sans", Verdana, Tahoma, sans-serif;
}

input, textarea {
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 1.1px;
}

h2 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
  color: #000;
  text-align: left;
  max-width: 530px;
  width: 100%;
  margin: 2em 0 1.5em;
}

h3, h4 {
  font-size: 17px;
  line-height: 1.2;
  font-weight: 500;
  color: #000;
  text-align: left;
  width: 100%;
  margin: 1.5em 0 1.5em;
  text-transform: uppercase;
  text-decoration: underline;
}

h5 {
  font-size: 16px;
  line-height: 1.75;
  font-weight: 100;
  color: #000;
  margin-bottom: 0.25em;
}

figcaption {
  display: block;
  font-size: 12px;
  margin-top: 10px;
  text-align: center;
}

caption {
  display: block;
  text-align: left;
  line-height: 1.5;
  font-size: 10px;
  font-family: "Arial Narrow", sans-serif;
  color: #000;
  margin: 5em 0;
  font-weight: normal;
}

/* Links */
a {
  text-decoration: none;
  color: #000;
}

a:visited, a:hover, a:active {
  color: #fff;
}

/* Navigation */
.nav-board {
  display: block;
  text-align: center;
  font-size: 16px;
  line-height: 1.75;
  color: #000;
  font-weight: 100;
  max-width: 600px;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Ad Content */
.ad-content {
  max-width: 530px;
  width: 100%;
  margin: 0 auto;
  text-align: justify;
  min-width: 200px;  /* optional: prevents UL collapse on tiny screens */
}

/* Blog Content */
.blog-content {
  max-width: 530px;
  width: 100%;
  margin: 0 auto;
  text-align: justify;
  min-width: 200px;  /* optional: prevents UL collapse on tiny screens */
}

/* FORCE UL / LI to normal weight inside blog-content */
.blog-content ul,
.blog-content li,
.blog-content li a,
.blog-content li span {
  font-weight: normal !important;  /* force normal weight */
}

.blog-content ul {
  padding-inline-start: 3em;   /* left indent that respects scaling */
  padding-inline-end: 2em;
  margin: 0 0 1em 0;             /* bottom spacing */
  list-style-position: outside;
}

.blog-content ol {
  padding-inline-start: 2em;   /* left indent that respects scaling */
  padding-inline-end: 0;
  margin: 0 0 1em 0;             /* bottom spacing */
  list-style-position: outside;
}

.blog-content ol li::marker {
  content: counter(list-item) ".     ";
}

.blog-content li {
  line-height: 1.6;
}

.blog-content ol li span {
  display: block; /* ensures multi-line text aligns under text, not number */
}

ul.blog-content,
ul.blog-content li,
ul.blog-content li span,
ul.blog-content li a {
  font-weight: 300 !important; /* or normal, 300 is lighter */
}

ol.blog-content,
ol.blog-content li,
ol.blog-content li span,
ol.blog-content li a {
  font-weight: 300 !important; /* or normal, 300 is lighter */
}

/* Headings Styles */
.heading-category, .headlight-buzz, .headlight-blitz, .headlight-byte, .headlight-bite,
.heading-buzz, .heading-blitz, .heading-byte, .heading-bite {
  max-width: 530px;
  width: 100%;
  margin: 0 auto;
}

.heading-category {
  text-align: right;
  font-family: Roboto, 'Century Gothic', 'Open Sans', 'AppleGothic', 'URW Gothic L', Futura, Verdana, 'Trebuchet MS', sans-serif;
  font-weight: bold;
  font-size: 32px;
  line-height: 1;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
  margin: 2em auto 1em;
}

.headlight-buzz, .headlight-blitz, .headlight-byte, .headlight-bite {
  text-align: right;
  font-family: 'Century Gothic', 'Open Sans', Roboto, 'AppleGothic', 'URW Gothic L', Futura, Verdana, 'Trebuchet MS', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  padding: 25px 20px 10px;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  box-shadow: 4px 8px 18px rgba(0,0,0,0.22);
  margin: 1.5em auto;
}

/* Headlight Colors */
.headlight-buzz { background: linear-gradient(to top, #F4F4CF 0%, #fff 100%); }
.headlight-blitz { background: linear-gradient(to top, #F4D8E3 0%, #fff 100%); }
.headlight-byte { background: linear-gradient(to top, #DCF6EE 0%, #fff 100%); }
.headlight-bite { background: linear-gradient(to top, #F5E7D7 0%, #fff 100%); }

.headlight-buzz a { background-color: #ACAC5A; color: #fff; }
.headlight-blitz a { background-color: #B98097; color: #fff; }
.headlight-byte a { background-color: #83B8A8; color: #fff; }
.headlight-bite a { background-color: #C09F7B; color: #fff; }

.heading-buzz, .heading-blitz, .heading-byte, .heading-bite {
  text-align: center;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  padding: 15px;
  background: linear-gradient(to top, #EFEFD0 0%, #fff 100%);
  border-top-left-radius: 20px;
  border-top-right-radius: 25px;
  margin: 3em auto 1.75em;
}

/* Heading Colors */
.heading-buzz { background: linear-gradient(to top, #F4F4CF 0%, #fff 100%); }
.heading-blitz { background: linear-gradient(to top, #F4D8E3 0%, #fff 100%); }
.heading-byte { background: linear-gradient(to top, #D0EFE6 0%, #fff 100%); }
.heading-bite { background: linear-gradient(to top, #EFE0D0 0%, #fff 100%); }
.content {
  padding: 16px;
  background-color: #fff;
}

.headlight-all h2 {
  font-weight: bold;
  font-size: 20px;
  line-height: 1.1;
  color: #fff;
  margin-top: 3px;
  text-align: right;
}

/* Modern <hr> style */
hr {
  max-width: 530px;
  width: 100%;
  border: none;
  height: 2px;
  background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
  margin: 2.5em 0 1em 0;
  border-radius: 1px;
}