/* Fanmaster industry pages. GENERATED from build_industry.py's CSS by
   build_wp_industry.py - regenerate rather than hand-editing.

   Every rule is scoped to .fm-ind or an .fm-ind- prefixed class. Nothing here
   may touch a bare element selector: this stylesheet loads inside a live
   WooCommerce site, so a rule on `body` or `h2` restyles the shop.

   Brand values come from the parent theme's own custom properties. The two
   faces are named directly because both are real @font-face declarations in
   fanmaster-2024, and because --font-main is set to "Public Sans" while the
   site's actual body copy renders in avenir - reading the variable first would
   put these pages in a different font to the rest of the site. */

.fm-ind {
  --fm-red: var(--primary-color, #ed2224);
  --fm-ink: var(--secondary-color-v2, #2a2a2a);
  --fm-body: var(--secondary-color, #4d4d4d);
  --fm-dim: #6a7581;
  --fm-line: var(--border-color, #e2e5e8);
  --fm-grey: var(--gray-color, #f4f5f6);
  --fm-cont: var(--cont-width, 1270px);
  --fm-head: "fatFrank", var(--font-head, "Public Sans"), Impact, system-ui, sans-serif;
  /* var(--font-main) MUST carry a fallback. An undefined custom property
     inside font-family is invalid-at-computed-value-time, which does NOT
     fall through to the next name in the stack - it collapses the whole
     declaration and the browser renders Times New Roman. --font-main is
     the parent theme's variable, so a parent update could remove it and
     silently reset every page to a serif. Verified in Chromium. */
  --fm-font: "avenir", var(--font-main, "Public Sans"), -apple-system, Segoe UI, Roboto, sans-serif;

  font-family: var(--fm-font);
  color: var(--fm-body);
  font-size: 17px;
  line-height: 1.66;
}

.fm-ind, .fm-ind *, .fm-ind *::before, .fm-ind *::after { box-sizing: border-box; }

.fm-ind h1, .fm-ind h2, .fm-ind h3 {
  font-family: var(--fm-head);
  color: var(--fm-ink);
  letter-spacing: -.02em;
  line-height: 1.14;
  margin: 0;
}

.fm-ind__wrap { max-width: var(--fm-cont); margin: 0 auto; padding: 0 24px; }
.fm-ind__narrow { max-width: 820px; }

/* hero */
.fm-ind__hero { position: relative; background: #0d1117; overflow: hidden; }
.fm-ind__heroimg {
  display: block; width: 100%; height: min(46vw, 430px);
  object-fit: cover; opacity: .62;
}
.fm-ind__noimg {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: min(46vw, 430px);
  background: #1b2027 repeating-linear-gradient(135deg,
    rgba(255,255,255,.03) 0 14px, transparent 14px 28px);
  color: rgba(255,255,255,.5); font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase;
}
.fm-ind__herobody {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 0 34px;
  background: linear-gradient(180deg, transparent, rgba(8,11,15,.82));
}
.fm-ind__k {
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: #ff6b52; margin: 0 0 10px; font-weight: 700;
}
.fm-ind__hero h1 { color: #fff; font-size: clamp(26px, 3.5vw, 44px); max-width: 20ch; }

/* body - the editor's own output lands inside .fm-ind__body, so these have to
   catch whatever Gutenberg emits without being able to use bare selectors */
.fm-ind__sec { padding: 52px 0; }
.fm-ind__sec + .fm-ind__sec { padding-top: 0; }
.fm-ind__body h2 { font-size: clamp(20px, 2.2vw, 27px); margin: 26px 0 14px; }
.fm-ind__body > h2:first-child { margin-top: 0; }
.fm-ind__body p { margin: 0 0 16px; max-width: 70ch; }

/* FAQ: a wp:group with className fm-ind__faqs, h3 + p pairs inside */
.fm-ind__faqs h3 {
  font-size: 17.5px; margin: 0 0 7px;
  font-family: var(--fm-font); font-weight: 700;
}
.fm-ind__faqs > h3 { border-top: 1px solid var(--fm-line); padding-top: 22px; }
.fm-ind__faqs > h3:first-child { border-top: 2px solid var(--fm-ink); }
.fm-ind__faqs p { margin: 0 0 22px; color: var(--fm-dim); }

/* related products: a wp:list with className fm-ind__links, one link per item */
.fm-ind__links { display: flex; flex-wrap: wrap; gap: 10px; padding: 6px 0 0; margin: 0; list-style: none; }
.fm-ind__links li { margin: 0; }
.fm-ind__links a {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px;
  border-radius: 8px; border: 1px solid var(--fm-line); background: var(--fm-grey);
  text-decoration: none; font-size: 14.5px; font-weight: 600; color: var(--fm-ink);
  transition: border-color .15s, background .15s;
}
.fm-ind__links a:hover { border-color: var(--fm-red); background: #fff; }
.fm-ind__links a::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fm-red);
}

/* CTA */
.fm-ind__cta {
  background: var(--fm-grey); border-top: 1px solid var(--fm-line);
  margin-top: 52px; padding: 46px 0;
}
.fm-ind__cta h2 { font-size: clamp(19px, 2vw, 25px); margin: 0 0 18px; }
.fm-ind__ctarow { display: flex; flex-wrap: wrap; gap: 12px; }
.fm-ind__btn {
  display: inline-flex; align-items: center; padding: 15px 27px; border-radius: 8px;
  text-decoration: none; font-weight: 700; font-size: 14.5px; letter-spacing: .02em;
}
.fm-ind__btn--p { background: var(--fm-red); color: #fff; }
.fm-ind__btn--g { border: 1px solid var(--fm-ink); color: var(--fm-ink); }
.fm-ind__back { display: inline-block; margin: 34px 0 0; font-size: 13.5px; color: var(--fm-dim); }

/* hub */
.fm-ind__lede { font-size: 18.5px; max-width: 64ch; margin: 0 0 8px; }
.fm-ind__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding: 8px 0 20px;
}
.fm-ind__card {
  display: block; text-decoration: none; border: 1px solid var(--fm-line);
  border-radius: 10px; overflow: hidden; background: #fff;
  transition: border-color .15s, transform .15s;
}
.fm-ind__card:hover { border-color: var(--fm-red); transform: translateY(-2px); }
.fm-ind__card img, .fm-ind__ph { display: block; width: 100%; height: 172px; object-fit: cover; }
.fm-ind__ph {
  background: #1b2027 repeating-linear-gradient(135deg,
    rgba(255,255,255,.03) 0 14px, transparent 14px 28px);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.45); font-size: 11px;
  letter-spacing: .16em; text-transform: uppercase;
}
.fm-ind__cardb { padding: 17px 19px 21px; }
.fm-ind__cardb h2 { font-size: 18px; margin: 0 0 6px; }
.fm-ind__cardb p {
  margin: 0; font-size: 14px; color: var(--fm-dim); line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

.fm-ind :focus-visible { outline: 3px solid var(--fm-red); outline-offset: 3px; }

@media (max-width: 900px) {
  .fm-ind__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .fm-ind__grid { grid-template-columns: 1fr; }
  .fm-ind__heroimg, .fm-ind__noimg { height: 230px; }
  .fm-ind { font-size: 16px; }
}

/* Promoted product, inline after a copy block.
   Added 3 Sep. The promos shipped in the prototype on 27-28 Aug and were
   missing from the WordPress build until now.
   Deliberately quiet: a rule above and below, no fill, no button. It reads as
   part of the page rather than as an ad dropped into it, which is what
   "subtle" has to mean on a page Troy asked to keep simple and clean.
   Written against the block editor's own <p> wrapper, so an editor can move or
   delete it in the normal editor without breaking the layout. */
.fm-ind__promo {
  display: flex; align-items: center; gap: 16px;
  margin: 30px 0 34px; padding: 0;
}
.fm-ind__promo a {
  display: flex; align-items: center; gap: 16px; width: 100%;
  padding: 18px 2px;
  border-top: 1px solid var(--fm-line); border-bottom: 1px solid var(--fm-line);
  text-decoration: none; color: inherit; transition: border-color .18s;
}
.fm-ind__promo a:hover {
  border-top-color: var(--fm-red); border-bottom-color: var(--fm-red);
}
.fm-ind__promo-k {
  font-size: 10.5px; letter-spacing: .19em; text-transform: uppercase;
  color: var(--fm-red); font-weight: 700; flex: none;
}
.fm-ind__promo-n {
  font-weight: 600; font-size: 16px; color: var(--fm-ink); flex: 1;
}
.fm-ind__promo-go {
  color: var(--fm-red); font-size: 19px; transition: transform .18s;
}
.fm-ind__promo a:hover .fm-ind__promo-go { transform: translateX(4px); }

@media (max-width: 600px) {
  .fm-ind__promo a { flex-wrap: wrap; gap: 8px 14px; }
  .fm-ind__promo-n { flex: 1 0 100%; order: 2; }
  .fm-ind__promo-go { order: 3; margin-left: auto; }
}