@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* =========================================================
   EMPIRE RUNNERS BLOG — custom styles (v2, hardened)
   Theme: Twenty Fourteen (WordPress.com)

   WHY THIS VERSION EXISTS
   The page loads an inline <style id="custom-colors-css"> block
   AFTER the custom stylesheet. On equal specificity the LAST
   rule wins, so plain selectors like .site-header or a lose.
   Every conflicting rule below is prefixed with
   body.custom-colors, which outranks those, so load order
   no longer matters.

   INSTALL
   Best:  Appearance → Customize → Additional CSS (paste all).
   Or:    keep /styles.css but move its <link> to the LAST line
          before </head>.
   The @import must stay on line 1 or the fonts won't load.

   NOTE: the prefix relies on <body class="… custom-colors …">,
   which WordPress.com adds while a custom color scheme is on.
   If you ever turn that off, search/replace
   "body.custom-colors" → "html body".
   ========================================================= */

:root {
  --er-ink:   #10151c;   /* text, footer field       */
  --er-blue:  #143a72;   /* club blue, links         */
  --er-deep:  #0d2549;   /* header + sidebar field   */
  --er-sun:   #e9a13b;   /* sunrise accent, sparing  */
  --er-fog:   #cfd6da;   /* hairlines, dividers      */
  --er-paper: #eceff1;   /* page background          */

  --er-display: 'Barlow Condensed', 'Lato', sans-serif;
  --er-body:    'Spectral', Georgia, serif;
  --er-meta:    'Barlow', 'Lato', sans-serif;
}

/* ---------- 1. Base ---------- */

body.custom-colors {
  background-color: var(--er-paper);
  font-family: var(--er-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--er-ink);
  -webkit-font-smoothing: antialiased;
}

body.custom-colors .site {
  background-color: #fff;
  box-shadow: 0 0 0 1px rgba(16, 21, 28, .07);
}

body.custom-colors .site:before {
  background-color: var(--er-deep);
}

body.custom-colors a {
  color: var(--er-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .15s ease;
}

body.custom-colors a:active,
body.custom-colors a:hover,
body.custom-colors .entry-title a:hover,
body.custom-colors .entry-meta a:hover,
body.custom-colors .cat-links a:hover {
  color: #a2551a;
}

body.custom-colors :focus-visible {
  outline: 2px solid var(--er-sun);
  outline-offset: 2px;
}

body.custom-colors ::selection { background-color: var(--er-sun); color: var(--er-ink); }
body.custom-colors ::-moz-selection { background-color: var(--er-sun); color: var(--er-ink); }

/* ---------- 2. Masthead + the horizon (signature) ---------- */

body.custom-colors .site-header {
  background-color: var(--er-deep);
  background-image: linear-gradient(180deg, #0b1f3d 0%, var(--er-deep) 100%);
  position: relative;
}

/* The club's old logo motif: a sun coming up over the ridge.
   One hairline horizon, one glow, nothing else. */
body.custom-colors .site-header:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-image:
    radial-gradient(24px 24px at 12% 100%, var(--er-sun) 0 40%, rgba(233, 161, 59, 0) 72%),
    linear-gradient(90deg, var(--er-sun) 0, rgba(233, 161, 59, .35) 32%, rgba(207, 214, 218, .18) 100%);
  pointer-events: none;
}

body.custom-colors .header-main {
  padding: 34px 10px 30px;
}

body.custom-colors .site-title {
  font-family: var(--er-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}

body.custom-colors .site-title a {
  color: #fff;
}

body.custom-colors .site-title a:hover {
  color: var(--er-sun);
  text-decoration: none;
}

/* ---------- 3. Primary navigation ---------- */

body.custom-colors .primary-navigation,
body.custom-colors .secondary-navigation {
  font-family: var(--er-meta);
}

body.custom-colors .primary-navigation {
  font-size: 12px;
  letter-spacing: .12em;
  padding-top: 20px;
}

body.custom-colors .site-navigation a {
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .74);
}

body.custom-colors .primary-navigation li:hover > a,
body.custom-colors .primary-navigation li.focus > a,
body.custom-colors .secondary-navigation li:hover > a,
body.custom-colors .secondary-navigation li.focus > a {
  background-color: transparent;
  color: var(--er-sun);
}

body.custom-colors .site-navigation .current_page_item > a,
body.custom-colors .site-navigation .current-menu-item > a,
body.custom-colors .site-navigation .current_page_ancestor > a,
body.custom-colors .site-navigation .current-menu-ancestor > a {
  color: var(--er-sun);
}

body.custom-colors .menu-toggle,
body.custom-colors .search-toggle {
  font-family: var(--er-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  background-color: rgba(255, 255, 255, .08);
}

body.custom-colors .menu-toggle:hover,
body.custom-colors .search-toggle:hover,
body.custom-colors .search-toggle.active {
  background-color: var(--er-sun);
  color: var(--er-ink);
}

body.custom-colors .search-box {
  background-color: var(--er-blue);
}

body.custom-colors .search-box .search-field {
  font-family: var(--er-meta);
  border-color: rgba(255, 255, 255, .35);
  background-color: rgba(255, 255, 255, .08);
  color: #fff;
}

body.custom-colors button,
body.custom-colors input[type="submit"],
body.custom-colors input[type="button"],
body.custom-colors input[type="reset"],
body.custom-colors .contributor-posts-link,
body.custom-colors #infinite-handle span {
  font-family: var(--er-meta);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 0;
  background-color: var(--er-blue);
  color: #fff;
}

body.custom-colors button:hover,
body.custom-colors input[type="submit"]:hover,
body.custom-colors input[type="button"]:hover,
body.custom-colors input[type="reset"]:hover,
body.custom-colors #infinite-handle span:hover {
  background-color: var(--er-sun);
  color: var(--er-ink);
}

/* ---------- 4. Featured content (homepage sticky posts) ---------- */

body.custom-colors .featured-content,
body.custom-colors .featured-content .entry-header {
  background-color: var(--er-ink);
}

body.custom-colors .featured-content .entry-header {
  padding: 20px 20px 26px;
  border-top: 3px solid var(--er-sun);
}

body.custom-colors.grid .featured-content .entry-header {
  border-color: var(--er-sun);
}

body.custom-colors .featured-content .post-thumbnail img {
  filter: saturate(1.05) contrast(1.03);
}

body.custom-colors .featured-content .entry-title {
  font-family: var(--er-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: .01em;
}

body.custom-colors .featured-content .hentry,
body.custom-colors .featured-content a,
body.custom-colors .featured-content .entry-meta,
body.custom-colors .featured-content .entry-meta a {
  color: #f4f6f7;
}

body.custom-colors .featured-content a:hover,
body.custom-colors .featured-content .entry-meta a:hover {
  color: var(--er-sun);
}

/* ---------- 5. Posts ---------- */

body.custom-colors .hentry {
  padding-top: 44px;
}

body.custom-colors .site-content .hentry + .hentry {
  border-top: 1px solid var(--er-fog);
}

body.custom-colors .site-content .entry-header {
  margin-bottom: 26px;
}

body.custom-colors .entry-title {
  font-family: var(--er-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: .005em;
  margin: 8px 0 14px;
}

body.custom-colors .site-content .entry-title a {
  color: var(--er-ink);
  text-decoration: none;
}

body.custom-colors .site-content .entry-title a:hover {
  color: var(--er-blue);
}

/* Meta reads like a results line: small, wide, quiet. */
body.custom-colors .site-content .entry-meta {
  font-family: var(--er-meta);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #55606c;
}

body.custom-colors .site-content .entry-meta a {
  color: #55606c;
  text-decoration: none;
}

body.custom-colors .site-content .entry-meta a:hover {
  color: var(--er-blue);
}

/* Category links as bib tags */
body.custom-colors .site-content .cat-links {
  display: block;
  margin-bottom: 10px;
}

body.custom-colors .site-content .cat-links a {
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  background-color: var(--er-paper);
  border-left: 3px solid var(--er-sun);
  color: var(--er-blue);
}

body.custom-colors .site-content .cat-links a:hover {
  background-color: var(--er-blue);
  border-left-color: var(--er-sun);
  color: #fff;
}

body.custom-colors .site-content .entry-content {
  font-size: 17.5px;
}

body.custom-colors .site-content .entry-content p {
  margin-bottom: 1.35em;
}

/* Interviews on this blog are marked up as bold questions,
   often inside bare divs — give them real weight. */
body.custom-colors .site-content .entry-content strong {
  font-family: var(--er-meta);
  font-weight: 600;
  font-size: 16.5px;
  color: var(--er-blue);
  letter-spacing: .005em;
}

body.custom-colors .site-content .entry-content em {
  color: #3c4653;
}

body.custom-colors .site-content .entry-content ul,
body.custom-colors .site-content .entry-content ol {
  margin: 0 0 1.5em 1.2em;
}

body.custom-colors .site-content .entry-content li {
  margin-bottom: .4em;
}

body.custom-colors .site-content .entry-content h1,
body.custom-colors .site-content .entry-content h2,
body.custom-colors .site-content .entry-content h3 {
  font-family: var(--er-display);
  font-weight: 600;
  letter-spacing: .01em;
}

body.custom-colors .site-content .entry-content img {
  height: auto;
}

body.custom-colors .site-content .entry-content .alignnone,
body.custom-colors .site-content .entry-content .wp-post-image {
  border: 1px solid var(--er-fog);
  padding: 4px;
  background-color: #fff;
}

body.custom-colors .site-content .entry-content blockquote {
  border-left: 3px solid var(--er-sun);
  padding-left: 20px;
  font-style: italic;
  color: #3c4653;
}

body.custom-colors .site-content .entry-content sup {
  font-size: .7em;
}

/* ---------- 6. Galleries ---------- */

body.custom-colors .tiled-gallery {
  margin-bottom: 1.6em;
}

body.custom-colors .tiled-gallery .tiled-gallery-item img {
  border: 1px solid var(--er-fog);
  transition: opacity .15s ease;
}

body.custom-colors .tiled-gallery .tiled-gallery-item img:hover {
  opacity: .82;
}

/* ---------- 7. Pagination ---------- */

body.custom-colors .paging-navigation {
  font-family: var(--er-meta);
  border-top: 3px solid var(--er-deep);
  border-color: var(--er-deep);
  margin-top: 24px;
}

body.custom-colors .paging-navigation .page-numbers {
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--er-blue);
}

body.custom-colors .paging-navigation a:hover {
  border-top-color: var(--er-sun);
  color: #a2551a;
}

body.custom-colors .paging-navigation .page-numbers.current {
  border-top-color: var(--er-sun);
  color: var(--er-ink);
}

/* ---------- 8. Sidebar + widgets ---------- */

body.custom-colors #secondary {
  background-color: var(--er-deep);
  border-top-color: var(--er-deep);
  color: rgba(255, 255, 255, .7);
}

body.custom-colors .site-description {
  font-family: var(--er-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--er-sun);
  padding-bottom: 18px;
}

body.custom-colors .secondary-navigation {
  font-size: 12px;
  letter-spacing: .1em;
  border-color: rgba(255, 255, 255, .14);
}

body.custom-colors .secondary-navigation li,
body.custom-colors .primary-sidebar .widget_archive li,
body.custom-colors .primary-sidebar .widget_categories li,
body.custom-colors .primary-sidebar .widget_recent_entries li,
body.custom-colors .footer-sidebar .widget_recent_entries li {
  border-color: rgba(255, 255, 255, .14);
}

body.custom-colors .primary-sidebar .widget-title,
body.custom-colors .footer-sidebar .widget-title,
body.custom-colors .primary-sidebar .widget-title a,
body.custom-colors .footer-sidebar .widget-title a {
  font-family: var(--er-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--er-sun);
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

body.custom-colors .primary-sidebar .widget,
body.custom-colors .footer-sidebar .widget {
  font-family: var(--er-meta);
  font-size: 14.5px;
  line-height: 1.6;
}

body.custom-colors .primary-sidebar .widget a,
body.custom-colors .footer-sidebar .widget a {
  color: #dfe5e9;
  text-decoration: none;
}

body.custom-colors .primary-sidebar .widget a:hover,
body.custom-colors .footer-sidebar .widget a:hover,
body.custom-colors .primary-sidebar .widget-title a:hover,
body.custom-colors .footer-sidebar .widget-title a:hover {
  color: var(--er-sun);
}

body.custom-colors .primary-sidebar .widget select,
body.custom-colors .footer-sidebar .widget select,
body.custom-colors .primary-sidebar .widget input,
body.custom-colors .footer-sidebar .widget input {
  font-family: var(--er-meta);
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  background-color: rgba(255, 255, 255, .06);
  color: #fff;
  max-width: 100%;
}

body.custom-colors .widget_blog_subscription input[type="text"] {
  padding: 8px 10px;
}

body.custom-colors .primary-sidebar .widget input[type="submit"],
body.custom-colors .footer-sidebar .widget input[type="submit"] {
  background-color: var(--er-sun);
  color: var(--er-ink);
  border-color: transparent;
}

body.custom-colors .primary-sidebar .widget input[type="submit"]:hover,
body.custom-colors .footer-sidebar .widget input[type="submit"]:hover {
  background-color: #fff;
  color: var(--er-ink);
}

/* The Prefontaine quote widget — let it breathe, kill the shouty red.
   The red is an inline style on the span, so !important is required. */
body.custom-colors .widget_twentyfourteen_ephemera .entry-content h1 {
  font-family: var(--er-display);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 500;
}

body.custom-colors .widget_twentyfourteen_ephemera .entry-content h1 span,
body.custom-colors .widget_twentyfourteen_ephemera .entry-content h1 strong {
  color: var(--er-sun) !important;
  font-weight: 500;
}

/* ---------- 9. Footer ---------- */

body.custom-colors .site-footer {
  background-color: var(--er-ink);
  color: rgba(255, 255, 255, .66);
}

body.custom-colors #supplementary {
  border-top: 3px solid var(--er-blue);
  padding-top: 34px;
}

body.custom-colors .footer-sidebar .textwidget {
  font-size: 14px;
  line-height: 1.65;
}

body.custom-colors .footer-sidebar .textwidget p {
  margin-bottom: .9em;
  word-break: break-word;
}

body.custom-colors .site-info,
body.custom-colors .site-info a {
  font-family: var(--er-meta);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

body.custom-colors .site-info {
  padding: 22px 0;
}

body.custom-colors .site-info a:hover {
  color: var(--er-sun);
}

/* ---------- 10. Responsive + quality floor ---------- */

@media screen and (max-width: 782px) {
  body.custom-colors { font-size: 16.5px; }
  body.custom-colors .site-title { font-size: 27px; }
  body.custom-colors .entry-title { font-size: 29px; }
  body.custom-colors .featured-content .entry-title { font-size: 21px; }
  body.custom-colors .header-main { padding: 24px 10px 22px; }

  /* custom-colors uses !important here, so match it */
  body.custom-colors .primary-navigation li:hover > a,
  body.custom-colors .primary-navigation li.focus > a,
  body.custom-colors .secondary-navigation li:hover > a,
  body.custom-colors .secondary-navigation li.focus > a {
    background-color: transparent !important;
  }
}

@media screen and (max-width: 480px) {
  body.custom-colors .entry-title { font-size: 25px; }
  body.custom-colors .site-content .entry-content { font-size: 16.5px; }
}

@media print {
  body.custom-colors .site-header,
  body.custom-colors #secondary,
  body.custom-colors .site-footer,
  body.custom-colors .featured-content,
  body.custom-colors .paging-navigation { display: none !important; }
  body.custom-colors .site { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}