/* ===== LongerMiles – Cassiopeia header & footer to match the original (v2, 2026-11-09) =====
   Previous version backed up as backup-cassiopeia-user.css.txt. Works together with js/user.js
   (sets --lm-topbar-h and toggles body.lm-scrolled). */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&family=Open+Sans:wght@400;600&display=swap');

:root {
  --lm-blue: #0b84ff;
  --lm-text: #222;
  --lm-accent: #1ea7e1;
  --lm-dark: #2b2c30;
  --lm-gutter: max(16px, calc((100% - 1110px) / 2));
}

/* ---------- Header ---------- */
.container-header {
  background: #fff !important;
  background-image: none !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* Top bar: full-width blue strip, email left, Contact right */
.container-header .container-topbar {
  background: var(--lm-blue);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px var(--lm-gutter);
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
}
.container-header .container-topbar p { margin: 0; }
/* Email always left, Contact always right (the two modules share an ordering value, so their DOM order varies by page) */
.container-header .container-topbar > .mod-custom { order: 1; }
.container-header .container-topbar > ul { order: 2; }
.container-header .container-topbar a,
.container-header .container-topbar .mod-menu a { color: #fff; text-decoration: none; }
.container-header .container-topbar a:hover { opacity: .85; }
.container-header .container-topbar .mod-menu,
.container-header .container-topbar .menu { display: flex; margin: 0; padding: 0; gap: 20px; list-style: none; }
.container-header .container-topbar li { list-style: none; }
.container-header .container-topbar .fa-envelope { margin-right: 6px; }

/* Logo */
.container-header .navbar-brand { margin: 0; padding: 10px 0; }
.container-header .brand-logo img { max-height: 70px; width: auto; height: auto; }

/* Main menu: dark text, blue when active/hover, no underline */
.container-header .metismenu > li > a,
.container-header .metismenu > li > button {
  color: var(--lm-text) !important;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  text-decoration: none !important;
}
.container-header .metismenu > li > a:hover,
.container-header .metismenu > li > button:hover,
.container-header .metismenu > li.active > a,
.container-header .metismenu > li.active > button {
  color: var(--lm-accent) !important;
}
.container-header .metismenu > li > a::after,
.container-header .metismenu > li > button::before,
.container-header .mod-menu > li::after { display: none !important; }
.container-header .metismenu .mm-collapse { background: #fff; }
.container-header .metismenu .mm-collapse a { color: var(--lm-text); text-decoration: none; }
.container-header .metismenu .mm-collapse a:hover { color: var(--lm-accent); }
.container-header .navbar-toggler { color: var(--lm-text); border-color: #ccc; }

/* Mobile/tablet (< 992px): logo centred, burger below it; header is static like the original */
@media (max-width: 991.98px) {
  .container-header .grid-child:has(.navbar-brand) { justify-content: center; }
  .container-header .container-nav { justify-content: center; }
  .container-header .navbar-collapse.show .metismenu { flex-direction: column; align-items: center; }
}

/* Desktop (>= 992px): one centred row
   Home · Running Shoes · Reviews  [logo]  Running Tips · Gears · Shoe News · About Us
   The wrappers between the header and the menu items use display:contents, so the
   menu items and the logo become siblings that can be ordered around the logo. */
@media (min-width: 992px) {
  .container-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 4px;
    position: sticky;
    top: calc(-1 * var(--lm-topbar-h, 39px));   /* top bar scrolls away, menu row sticks */
    z-index: 1020;
  }
  .container-header .container-topbar { flex: 0 0 100%; order: 0; }
  .container-header > .grid-child,
  .container-header .container-nav nav,
  .container-header .container-nav .navbar-collapse,
  .container-header .container-nav .metismenu {
    display: contents !important;
  }
  .container-header .metismenu > li { order: 1; padding: .5em 14px; }
  .container-header .navbar-brand { order: 2; margin: 0 40px; min-height: 94px; display: flex; align-items: center; }
  .container-header .metismenu > li:nth-child(n+4) { order: 3; }

  /* Sticky state after scrolling: logo left, whole menu right */
  .lm-scrolled .container-header {
    justify-content: flex-end;
    padding: 0 var(--lm-gutter);
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
  }
  .lm-scrolled .container-header .container-topbar { margin: 0 calc(-1 * var(--lm-gutter)); }
  .lm-scrolled .container-header .navbar-brand { order: 0; margin: 0 auto 0 0; }
}

/* ---------- Footer ---------- */
.container-footer.footer {
  background: #fff;
  background-image: none;
  color: var(--lm-text);
  margin-top: 3rem;
}
.container-footer.footer .grid-child {
  display: block;
  max-width: none;
  padding: 0;
}

/* Newsletter section (AcyMailing module #217, module class lm-newsletter) */
.footer .lm-newsletter {
  background: var(--lm-dark);
  color: #fff;
  padding: 70px var(--lm-gutter) 80px;
  margin: 0;
}
.footer .lm-newsletter h3 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 2.1rem;
  color: #fff;
  margin: 0 0 1.4rem;
}
.footer .lm-newsletter .acym_module,
.footer .lm-newsletter .acym_fulldiv,
.footer .lm-newsletter .acym_module_form,
.footer .lm-newsletter .acym_form,
.footer .lm-newsletter .onefield,
.footer .lm-newsletter label { display: block; width: 100%; max-width: 1000px; margin: 0; }
.footer .lm-newsletter .acym__users__creation__fields__title {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
  margin-bottom: 6px;
  color: #fff;
}
.footer .lm-newsletter input[type="email"] {
  width: 100%;
  max-width: none;          /* AcyMailing's module.css caps it at 90% */
  box-sizing: border-box;
  height: 52px;
  padding: 0 12px;
  background: #fff;
  color: var(--lm-text);
  border: 1px solid #ccc;
  border-radius: 2px;
}
.footer .lm-newsletter .acysubbuttons { margin: 18px 0 0; max-width: 1000px; }
.footer .lm-newsletter .acysubbuttons .btn {
  width: 100%;
  height: 46px;
  background: var(--lm-blue);
  border: 0;
  border-radius: 0;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 17px;
}
.footer .lm-newsletter .acysubbuttons .btn:hover { background: #0670dc; }

/* Bottom bar: copyright left, social icons right (Custom module #218) */
.footer .lm-footer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--lm-gutter);
  background: #fff;
}
.footer .lm-copy { margin: 0; color: var(--lm-accent); font-family: 'Montserrat', sans-serif; font-size: 17px; }
.footer .lm-social { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.footer .lm-social a { font-size: 20px; text-decoration: none; }
.footer .lm-social a.lm-fb { color: #39539E; }
.footer .lm-social a.lm-tw { color: #3DA9F6; }
.footer .lm-social a.lm-ig { color: #467FAA; }
.footer .lm-social a:hover { opacity: .8; }

/* Back-to-top button: blue square like the original */
.back-to-top-link {
  background: var(--lm-blue);
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: .6em .75em;
  bottom: 1.25rem;
  inset-inline-end: 1.25rem;
}
.back-to-top-link:hover, .back-to-top-link:focus { background: #0670dc; color: #fff; }

/* ---------- Home hero banner (Custom module #185 "Home Banner", Cassiopeia "banner" position) ---------- */
.container-banner #mod-custom185 p { margin: 0; text-align: center; }
.container-banner #mod-custom185 span { display: block; background: transparent !important; }
.container-banner #mod-custom185 img { display: block; margin: 0 auto; max-width: 100%; height: auto; }

/* ---------- Reviews page brand logos (Custom module #189 "Reviews", Cassiopeia "banner" position) ---------- */
.container-banner #mod-custom189 { padding: 0 var(--lm-gutter); }
.container-banner #mod-custom189 h2 { font-family: 'Open Sans', sans-serif; font-weight: 600; color: var(--lm-text); }
.container-banner #mod-custom189 img { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; margin: 4px; }
@media (max-width: 575.98px) {
  .container-banner #mod-custom189 img { width: 42%; }
}

/* ---------- Page-title banner (Custom module "Page Title Banner", layout cassiopeia:lm-pagebanner) ----------
   Same look as the old Astroid banner: background image, 55% dark overlay, centred white title. */
.lm-pagebanner {
  position: relative;
  text-align: center;
  background: #f8f9fa center / cover no-repeat;
  padding: 80px 15px;
}
.lm-pagebanner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
}
.lm-pagebanner__inner { position: relative; max-width: 1140px; margin: 0 auto; }
.lm-pagebanner__title {
  margin: 0;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 2em;
  line-height: 1.2;
}
@media (max-width: 767.98px) {
  .lm-pagebanner { padding: 50px 15px; }
  .lm-pagebanner__title { font-size: 1.6em; }
}

/* ---------- Content width: 1110px like the original's 1140px Bootstrap container ---------- */
@media (min-width: 992px) {
  .site-grid {
    grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 265.5px)) [main-end] minmax(0, 1fr) [full-end];
  }
  /* The banner sits inside .site-grid, so the spacing goes on the content column:
     34px + Cassiopeia's 16px row gap = 50px, as on the original. */
  .site-grid > .container-component { padding-top: 34px; padding-bottom: 34px; }
}

/* ---------- Articles & category blogs: match the original (Astroid / JD Paris) look ----------
   Labels "Category:" / "Parent Category:" are removed by en-US language overrides
   (COM_CONTENT_CATEGORY, COM_CONTENT_PARENT = "%s"); read time is added by js/user.js. */
body.com_content .container-component { font-family: 'Montserrat', sans-serif; line-height: 1.75; }
body.com_content .container-component :is(h1, h2, h3, h4, h5, h6) {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  line-height: 1.2;
}

/* Meta line: no "Details" label, small grey outline icons, items side by side */
.com_content .article-info-term { display: none; }
.com_content .article-info { margin: 10px 0 0; font-size: 13px; line-height: 1.75; }
.com_content .article-info > dd { display: inline-block; margin: 0; padding-right: 10px; color: #4e5862; font-size: 13px; }
.com_content .article-info > dd a,
.com_content .article-info > dd span { color: #4e5862; text-decoration: none; }
.com_content .article-info > dd a:hover { color: #007bff; }
.com_content .article-info [class^="icon-"] { width: auto; margin-right: 3px; }
.com_content .article-info [class^="icon-"]::before { font-weight: 400; }
.com_content .article-info .parent-category-name .icon-folder::before { content: "\f07c"; }   /* folder-open, as on the original */
.com_content .article-info .category-name .icon-folder-open::before { content: "\f07b"; }     /* folder */
.com_content .article-info .lm-readtime .icon-clock::before { content: "\f017"; }

/* Blog cards */
.com_content .blog-items { gap: 30px; }
.com_content .blog-items[class*="masonry-"] { column-gap: 30px; }
.com_content .blog-item {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #f8f9fa;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
}
.com_content .blog-items[class*="masonry-"] .blog-item { margin-bottom: 30px; }
.com_content .blog-item .item-image { margin: 0; text-align: center; }
.com_content .blog-item .item-image img { display: block; width: 100%; height: auto; }
.com_content .blog-item .item-content { padding: 1.25rem; }
.com_content .blog-item .page-header { margin: 0; }
.com_content .blog-item .page-header h2 { font-size: 24px; line-height: normal; margin: 0; }
.com_content .blog-item .page-header h2 a { color: #212529; text-decoration: none; }
.com_content .blog-item .page-header h2 a:hover,
.com_content .blog-item .page-header h2 a:focus { color: #007bff; }

/* Article page: blue title, meta under it, centred lead image */
.com_content .item-page .page-header { margin-bottom: 25px; }
.com_content .item-page .page-header :is(h1, h2) { color: #25aae1; font-size: 2.6em; margin: 0; }
.com_content .item-page > .item-image { margin: 25px 0 0; text-align: center; }
.com_content .item-page > .item-image img { display: inline-block; max-width: 100%; height: auto; }
.com_content .item-page .com-content-article__body { padding-top: 15px; }
@media (max-width: 767.98px) {
  .com_content .item-page .page-header :is(h1, h2) { font-size: 1.9em; }
  .com_content .blog-item .page-header h2 { font-size: 21px; }
}

/* ---------- Content ---------- */
/* No underlines on JD Builder card titles */
[class^="jdb-"] a, [class*=" jdb-"] a { text-decoration: none; }
[class^="jdb-"] a:hover, [class*=" jdb-"] a:hover { color: var(--lm-accent); }