/* RRN — Wrestling Uncensored, brick restyle
   Scoped hard to .page-id-37980 so nothing leaks to other pages.
   Palette taken from the page's own banner: brick, neon red, amber LED,
   cyan rim light — which is the same system as the 2026 front page. */

@import url("/wp-content/uploads/elementor/google-fonts/css/anton.css");
@import url("/wp-content/uploads/elementor/google-fonts/css/spacegrotesk.css");

.page-id-37980 {
  --wu-ground: #140A0B;
  --wu-cream:  #F4EDE2;
  --wu-red:    #990033;
  --wu-gold:   #F0B43C;
  --wu-ink:    #111;
  --wu-muted:  #C9C6BC;
  --wu-body:   #3B3A35;
  --wu-brick:  url("/wp-content/uploads/2026/08/rrn-brick.jpg");
}

/* ---- page ground -------------------------------------------------------- */
.page-id-37980,
.page-id-37980 .elementor-location-single,
.page-id-37980 main { background: var(--wu-ground); }

/* every top-level band sits on the wall, behind a flat wash so text holds */
/* Band backgrounds are NOT set here. Overriding Elementor's container
   background from a stylesheet loses in ways that are hard to see: the rule
   matched, carried !important and a valid value, and still computed to `none`.
   The brick now lives in each container's own Elementor settings, so Elementor
   emits it with its own specificity and its own lazy-load handling - the same
   path the hero band was already using when it worked and the others did not. */

/* the red band under the membership block, echoing the banner's neon */
.page-id-37980 .elementor-element.elementor-element-2bf7620 {
  background-color: var(--wu-red) !important;
  background-image: none !important;
}

/* ---- type --------------------------------------------------------------- */
.page-id-37980 h1,
.page-id-37980 h2,
.page-id-37980 h3,
.page-id-37980 .elementor-heading-title {
  font-family: "Anton", Impact, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: .95;
  color: var(--wu-cream) !important;
}

.page-id-37980 .elementor-element-0a83919 .elementor-heading-title {
  color: var(--wu-cream) !important;   /* was #3B0A4A, off-brand purple */
  font-size: clamp(34px, 5vw, 60px);
}

/* Two blocks are paragraphs marked up as <h2>. The blanket heading rule above
   set them in Anton uppercase, which made 239 characters of body copy close to
   unreadable. CSS cannot select on text length, so they are named explicitly.
   Any future long-copy heading on a category page needs adding here. */
.page-id-37980 .elementor-element-ff6e7bb .elementor-heading-title,
.page-id-37980 .elementor-element-8978c35 .elementor-heading-title {
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  text-transform: none !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  color: var(--wu-muted) !important;
}

/* the LED-board line from the banner, in its amber */
.page-id-37980 .elementor-element-4363ba7 .elementor-heading-title { color: var(--wu-gold) !important; }
.page-id-37980 .elementor-element-8978c35 .elementor-heading-title {
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  text-transform: none;
  font-size: 17px; font-weight: 500; line-height: 1.5;
  color: var(--wu-muted) !important;
}

.page-id-37980 .elementor-widget-text-editor,
.page-id-37980 .elementor-widget-text-editor p,
.page-id-37980 .elementor-widget-post-info {
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  color: var(--wu-muted) !important;
  line-height: 1.65;
}
.page-id-37980 .elementor-widget-text-editor a { color: var(--wu-gold) !important; }

/* ---- the banner, framed like the front page's player -------------------- */
.page-id-37980 .elementor-element-f0b0c5e img {
  border: 3px solid var(--wu-cream);
  box-shadow: 10px 10px 0 rgba(0,0,0,.55);
  display: block; width: 100%; height: auto;
}

/* ---- the four capability cards ------------------------------------------ */
.page-id-37980 .elementor-element-2aa38a2,
.page-id-37980 .elementor-element-b4c2dfe,
.page-id-37980 .elementor-element-8f3596b,
.page-id-37980 .elementor-element-b847123 {
  background: var(--wu-cream);
  border: 3px solid var(--wu-ink);
  box-shadow: 6px 6px 0 var(--wu-ink);
  padding: 18px !important;
}
.page-id-37980 .elementor-element-2aa38a2 .elementor-icon-box-title,
.page-id-37980 .elementor-element-b4c2dfe .elementor-icon-box-title,
.page-id-37980 .elementor-element-8f3596b .elementor-icon-box-title,
.page-id-37980 .elementor-element-b847123 .elementor-icon-box-title,
.page-id-37980 .elementor-icon-box-title,
.page-id-37980 .elementor-icon-box-title a { color: var(--wu-ink) !important; }
.page-id-37980 .elementor-icon-box-description { color: var(--wu-body) !important; font-family: "Space Grotesk", system-ui, sans-serif !important; }
.page-id-37980 .elementor-icon-box-wrapper .elementor-icon { color: var(--wu-red) !important; }

/* the 01-04 numerals read as ring-post markers */
.page-id-37980 .elementor-widget-divider .elementor-divider__text {
  font-family: "Anton", Impact, sans-serif !important;
  color: var(--wu-gold) !important;
  font-size: 22px; letter-spacing: .08em;
}
.page-id-37980 .elementor-widget-divider .elementor-divider-separator { border-color: rgba(244,237,226,.28) !important; }

/* ---- loop cards --------------------------------------------------------- */
.page-id-37980 .elementor-widget-loop-grid .e-loop-item {
  background: var(--wu-cream);
  border: 3px solid var(--wu-ink);
  box-shadow: 6px 6px 0 var(--wu-ink);
}
/* The loop templates were built for a dark ground: title #E8E9EB, excerpt
   #C9C6BC. On a cream card that is nearly invisible, and the page-level body
   rule above leaks in too. Everything inside a card is re-grounded to ink. */
.page-id-37980 .elementor-widget-loop-grid .e-loop-item,
.page-id-37980 .elementor-widget-loop-grid .e-loop-item h1,
.page-id-37980 .elementor-widget-loop-grid .e-loop-item h2,
.page-id-37980 .elementor-widget-loop-grid .e-loop-item h3,
.page-id-37980 .elementor-widget-loop-grid .e-loop-item h4,
.page-id-37980 .elementor-widget-loop-grid .e-loop-item .elementor-heading-title,
.page-id-37980 .elementor-widget-loop-grid .e-loop-item .elementor-widget-heading,
.page-id-37980 .elementor-widget-loop-grid .e-loop-item .elementor-widget-text-editor,
.page-id-37980 .elementor-widget-loop-grid .e-loop-item .elementor-widget-text-editor p {
  color: var(--wu-ink) !important;
}
.page-id-37980 .elementor-widget-loop-grid .e-loop-item .elementor-heading-title {
  font-family: "Anton", Impact, sans-serif !important;
  text-transform: uppercase; line-height: 1.05;
}
.page-id-37980 .elementor-widget-loop-grid .e-loop-item .elementor-widget-text-editor,
.page-id-37980 .elementor-widget-loop-grid .e-loop-item .elementor-widget-text-editor p {
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  color: var(--wu-body) !important;
}
/* the date line, and any link inside a card */
.page-id-37980 .elementor-widget-loop-grid .e-loop-item .elementor-widget-post-info,
.page-id-37980 .elementor-widget-loop-grid .e-loop-item .elementor-widget-post-info * {
  color: var(--wu-body) !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
}
.page-id-37980 .elementor-widget-loop-grid .e-loop-item a { color: var(--wu-red) !important; }
.page-id-37980 .elementor-widget-loop-grid .e-loop-item a:hover { color: var(--wu-ink) !important; }
/* card media sits flush to the ink border */
.page-id-37980 .elementor-widget-loop-grid .e-loop-item .elementor-widget-image img {
  display: block; width: 100%; height: auto;
}

/* Three across on desktop, matching the front page's coverage band. The widget
   stays v3 - this is styling only, no rebuild. */
.page-id-37980 .elementor-element-3008042 .elementor-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
}
@media (max-width: 1024px) {
  .page-id-37980 .elementor-element-3008042 .elementor-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .page-id-37980 .elementor-element-3008042 .elementor-grid { grid-template-columns: 1fr !important; }
}

/* ---- buttons ------------------------------------------------------------ */
.page-id-37980 .elementor-button,
.page-id-37980 .elementor-widget-loop-grid .elementor-button {
  background-color: var(--wu-gold) !important;
  color: var(--wu-ink) !important;
  border: 2px solid var(--wu-ink) !important;
  border-radius: 0 !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.page-id-37980 .elementor-button:hover { background-color: var(--wu-cream) !important; }

/* membership block sits on the red band */
.page-id-37980 .elementor-element-2bf7620 .elementor-heading-title,
.page-id-37980 .elementor-element-2bf7620 .elementor-widget-text-editor { color: var(--wu-cream) !important; }
.page-id-37980 .elementor-element-2bf7620 .elementor-button { background-color: var(--wu-ink) !important; color: var(--wu-gold) !important; }

@media (max-width: 767px) {
  .page-id-37980 .elementor-element-f0b0c5e img { border-width: 2px; box-shadow: 6px 6px 0 rgba(0,0,0,.55); }
}

/* ---- v4 coverage cards --------------------------------------------------
   The loop at the foot of this page is the front page's atomic v4 collection
   loop, copied verbatim, so it carries its own type and colour. The blanket
   heading rule above is scoped to .page-id-37980 and marked !important, which
   outranks the card's own .cov-title rule and repainted the titles cream on a
   cream card - invisible. Hand the cards back to themselves.

   Kept narrow on purpose: only what the page-level rules would otherwise
   overwrite, so the card design still lives on the elements, not here. */
.page-id-37980 .cov-item .cov-title,
.page-id-37980 .cov-item h1,
.page-id-37980 .cov-item h2,
.page-id-37980 .cov-item h3,
.page-id-37980 .cov-item h4 {
  color: #111111 !important;
}
.page-id-37980 .cov-item .cov-tag { color: #F0B43C !important; }
.page-id-37980 .cov-item .cov-meta { color: #6B5A4E !important; }

/* ---- crew panel ---------------------------------------------------------
   The panel and its type come from Elementor global classes (wu-panel, wu-h2,
   wu-name, wu-body), which is where that design belongs and where it stays
   editable. The only reason this block exists is the blanket heading rule
   further up: it is scoped to .page-id-37980 and marked !important, so it
   outranks any global class and repainted the panel heading cream on a cream
   card, then forced Anton caps onto the host names. Hand those back.

   Same shape as the .cov-item exemption above. If a third component needs one
   of these, scope the blanket rule instead of adding a fourth. */
.page-id-37980 .wu-panel :is(h1,h2,h3,h4),
.page-id-37980 .wu-panel .elementor-heading-title {
  color: #111111 !important;
}
.page-id-37980 .wu-panel .wu-name {
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  text-transform: none !important;
}