/* ==========================================================================
   01. Tokens, reset, base
   ========================================================================== */

:root {
  /* dark side (body, content panels) */
  --bg:         #1d2124;
  --bg-2:       #23282b;
  --panel:      #2b3033;
  --panel-2:    #32384c;
  --panel-line: #3b4246;
  --text:       #cacbcb;
  --text-dim:   #949a9d;

  /* light side (header, footer) */
  --light:      #e8ebec;
  --light-2:    #dcdfe1;
  --light-line: #c6cbcd;
  --ink:        #2d3235;

  /* accent */
  --orange:     #f6831a;
  --orange-2:   #d96c0c;

  --display: "Trebuchet MS", "Segoe UI", Tahoma, Verdana, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --shell: 1080px;
  --gutter: 15px;
  --radius: 4px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 13px/1.6 var(--body);
}

img { border: 0; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
table { border-collapse: collapse; }
input, button, select, textarea { font: inherit; }

a {
  color: var(--orange);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: #ffa04d; }

h1, h2, h3, h4, h5 {
  margin: 0 0 .6em;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
h1 { font-size: 25px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }

strong, b { color: #fff; font-weight: 700; }
em { color: inherit; }

::selection { background: var(--orange); color: #1d2124; }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}


/* ==========================================================================
   02. Page frame + Gantry 12-column grid
   ========================================================================== */

#rt-page-surround { overflow-x: hidden; }
#rt-page-background { display: block; }

#rt-drawer { display: none; }        /* empty on this page */

.rt-container {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 20px;
}

/* grid columns — float-based, matching the template's .clear convention */
.rt-grid-1, .rt-grid-2, .rt-grid-3, .rt-grid-4, .rt-grid-5, .rt-grid-6,
.rt-grid-7, .rt-grid-8, .rt-grid-9, .rt-grid-10, .rt-grid-11, .rt-grid-12 {
  float: left;
  padding: 0 var(--gutter);
}
.rt-grid-1  { width: 8.3333%; }
.rt-grid-2  { width: 16.6667%; }
.rt-grid-3  { width: 25%; }
.rt-grid-4  { width: 33.3333%; }
.rt-grid-5  { width: 41.6667%; }
.rt-grid-6  { width: 50%; }
.rt-grid-7  { width: 58.3333%; }
.rt-grid-8  { width: 66.6667%; }
.rt-grid-9  { width: 75%; }
.rt-grid-10 { width: 83.3333%; }
.rt-grid-11 { width: 91.6667%; }
.rt-grid-12 { width: 100%; }

.rt-alpha { padding-left: 0; }
.rt-omega { padding-right: 0; }

.rt-block { position: relative; }


/* ==========================================================================
   03. Header
   ========================================================================== */

#rt-header-surround {
  background: linear-gradient(to bottom, #f2f4f5, var(--light));
  border-bottom: 1px solid var(--light-line);
}
#rt-header-surround2,
#rt-header-surround3,
#rt-header-content { display: block; }

#rt-header { padding: 18px 0 14px; }

#rt-header-background,
#rt-header-background2,
#rt-header-background3 { display: none; }

/* the inline <style> sets #rt-logo to 150x101; the background image lives in
   the template CSS, so this prints the club name as a fallback.
   Delete the ::after rule if your logo image is intact. */
#rt-logo {
  display: block;
  width: 150px;
  height: 101px;
  position: relative;
  background-repeat: no-repeat;
  background-position: left center;
  overflow: hidden;
}
#rt-logo::after {
  content: "eRclub";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--display);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
#rt-logo:hover::after { color: var(--orange); }


/* ==========================================================================
   04. Fusion menu
   ========================================================================== */

#rt-navigation {
  background: var(--bg-2);
  border-top: 3px solid var(--orange);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .04);
}

.rt-fusionmenu,
.nopill,
.rt-menubar { display: block; }

ul.menutop {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.menutop li.root { position: relative; }

.menutop li.root > .item {
  display: block;
  padding: 15px 16px;
  color: var(--text);
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.menutop li.root:hover > .item,
.menutop li.active.root > .item,
.menutop li.f-mainparent-itemfocus > .item {
  background: rgba(246, 131, 26, .10);
  color: var(--orange);
}
.menutop li.active.root > .item { box-shadow: inset 0 -3px 0 var(--orange); }

/* dropdown caret */
.daddyicon {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 7px;
  vertical-align: 2px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  opacity: .7;
}

/* submenus — CSS hover fallback so they work even if fusion.js fails */
.fusion-submenu-wrapper {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: none;
  min-width: 180px;
  padding: 6px 0;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-top: 2px solid var(--orange);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.menutop li.root:hover > .fusion-submenu-wrapper,
.menutop li.root:focus-within > .fusion-submenu-wrapper { display: block; }

.fusion-submenu-wrapper ul.level2 { width: 100% !important; }

.fusion-submenu-wrapper li > .item {
  display: flex;
  align-items: center;
  padding: 8px 14px;
  color: var(--text);
  font-size: 12.5px;
  transition: background .15s ease, color .15s ease;
}
.fusion-submenu-wrapper li > .item:hover {
  background: rgba(246, 131, 26, .12);
  color: var(--orange);
}
.fusion-submenu-wrapper .item.image span { display: flex; align-items: center; }
.fusion-submenu-wrapper .item.image img {
  width: auto;
  height: auto;
  margin-right: 8px;
  opacity: .8;
}

.drop-bot { display: none; }


/* ==========================================================================
   05. RokStories gallery
   ========================================================================== */

#rt-gallery {
  background: #15181a;
  border-bottom: 1px solid #000;
}

.rt-gallery-container {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
}

/* only the active slide shows; rokstories.js moves the .active class */
.rt-gallery-items > li { display: none; }
.rt-gallery-items > li.active { display: block; }
.rt-gallery-items img {
  display: block;
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

.rt-gallery-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(21, 24, 26, .45) 0%, rgba(21, 24, 26, 0) 35%,
              rgba(21, 24, 26, .75) 100%);
  z-index: 2;
}
.rt-gallery-overlay2,
.rt-gallery-overlay3,
.rt-gallery-overlay4 { display: none; }

.rt-gallery-controls-container {
  position: relative;
  z-index: 3;
  padding: 14px 20px 16px;
}
.rt-gallery-controls,
.rt-gallery-controls2,
.rt-gallery-controls3 { display: block; }

/* all seven story titles live in the DOM at once — render them as a link
   strip instead of a stack, so it reads correctly with or without JS */
.rt-gallery-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
a.layout7-title {
  padding: 6px 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px;
  color: var(--text);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
a.layout7-title:hover,
a.layout7-title.active {
  background: var(--orange);
  border-color: var(--orange);
  color: #1d2124;
}

/* bullet / arrow pager */
.rt-gallery-controls3 > ul {
  display: flex;
  align-items: center;
  gap: 7px;
}
.rt-gallery-controls3 > ul > li {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.rt-gallery-controls3 > ul > li:hover { background: rgba(255, 255, 255, .5); }
.rt-gallery-controls3 > ul > li.active {
  background: var(--orange);
  transform: scale(1.2);
}
.rt-gallery-controls3 > ul > li.arrow {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  color: var(--text);
  font-size: 13px;
  line-height: 1;
}
.rt-gallery-controls3 > ul > li.arrow:hover {
  background: var(--orange);
  color: #1d2124;
  transform: none;
}
.rt-gallery-controls3 > ul > li.previous::before { content: "\2039"; }
.rt-gallery-controls3 > ul > li.next::before { content: "\203A"; }
.rt-gallery-controls3 > ul > li.previous { margin-right: 4px; }
.rt-gallery-controls3 > ul > li.next { margin-left: 4px; }


/* ==========================================================================
   06. Main area and module chrome
   ========================================================================== */

#rt-body-background { padding: 30px 0 40px; }

#rt-main { display: block; }
.rt-main-inner::after {
  content: "";
  display: table;
  clear: both;
}

/* .box1 / .box4 / .box5 are the Gantry module styles used on this page */
.box4 .rt-module-surround,
.box5 .rt-module-surround,
#rt-mainbody .rt-module-surround {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 22px 24px;
}
.rt-module-surround2,
.rt-module-surround3,
.rt-module-inner,
.component-content,
.main-shadow,
.main-shadow2 { display: block; }

#rt-sidebar-a .box4 { margin-bottom: 22px; }
#rt-sidebar-a .box4:last-child { margin-bottom: 0; }

/* module heading */
.module-title {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--panel-line);
}
.module-title .title {
  margin: 0;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
}
/* signature: an orange speed-bar leading each module title */
.module-title .title::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 3px;
  margin-right: 10px;
  vertical-align: 4px;
  background: var(--orange);
  transform: skewX(-25deg);
}

/* Gantry icon/title variants */
.icon1 .module-title .title::before,
.icon7 .module-title .title::before { background: var(--orange); }
.title3 .module-title .title { letter-spacing: .09em; }

/* pure-decoration hooks from the template (background-image slots) */
.top-highlight, .top-highlight2,
.bottom-highlight, .bottom-highlight2,
.title-highlight, .title-highlight2,
.main-fade, .main-fade2, .main-fade3,
.bottom-shadow, .bottom-shadow2 { display: none; }


/* ==========================================================================
   07. Article body
   ========================================================================== */

#rt-mainbody .rt-module-surround { padding: 26px 30px; }

.rt-joomla,
.rt-blog,
.rt-leading-articles,
.rt-article,
.rt-article-bg { display: block; }

.article-header { margin-bottom: 6px; }

.article-header .module-title {
  margin-bottom: 18px;
  padding-bottom: 12px;
}
.article-header h1.title {
  font-size: 25px;
  letter-spacing: .01em;
  text-transform: none;
  line-height: 1.25;
}
.article-header h1.title::before {
  width: 22px;
  height: 4px;
  vertical-align: 7px;
}

.module-content { font-size: 13.5px; }
.module-content p { margin: 0 0 1.1em; }
.module-content p:last-child { margin-bottom: 0; }
.module-content a { text-decoration: underline; text-underline-offset: 2px; }
.module-content ul { margin: 0 0 1.1em; padding-left: 18px; list-style: disc; }
.module-content li { margin-bottom: .35em; }
.module-content img { border-radius: 3px; }
.module-content hr {
  height: 1px;
  margin: 1.6em 0;
  border: 0;
  background: var(--panel-line);
}
.module-content blockquote {
  margin: 1.2em 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--orange);
  color: #fff;
}


/* ==========================================================================
   08. Sidebar modules
   ========================================================================== */

/* --- News Pro GK4 ------------------------------------------------------- */
.nsp_main { width: 100% !important; }
.nsp_arts { width: 100% !important; }

.nsp_top_interface {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.nsp_top_interface > div { display: flex; gap: 6px; }
.nsp_top_interface span.prev,
.nsp_top_interface span.next {
  padding: 4px 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.nsp_top_interface span.prev:hover,
.nsp_top_interface span.next:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #1d2124;
}

.nsp_art { width: 100% !important; }
.nsp_art.unvisible { display: none; }
.nsp_art > div { padding: 0 !important; }

h4.nsp_header {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.3;
}
h4.nsp_header a { color: var(--orange); }
h4.nsp_header a:hover { color: #ffa04d; }

p.nsp_text {
  margin: 0 0 6px;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.55;
}
p.nsp_info {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
}
p.nsp_info:empty { display: none; }

/* --- JComments latest list ---------------------------------------------- */
ul.jclistbox4 { display: block; }
ul.jclistbox4 > li {
  padding: 10px 0 10px 14px;
  border-bottom: 1px solid var(--panel-line);
  position: relative;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
ul.jclistbox4 > li:last-child { border-bottom: 0; padding-bottom: 0; }
ul.jclistbox4 > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 17px;
  width: 6px;
  height: 2px;
  background: var(--orange);
  transform: skewX(-25deg);
}
.jcl_comment { color: var(--text); }
.jcl_readmore { white-space: nowrap; font-size: 11.5px; }
.jcl_date { font-size: 11px; color: var(--text-dim); }

/* --- RokAjaxSearch ------------------------------------------------------ */
#rokajaxsearch { margin: 0; }
.rokajaxsearchbox4 { display: block; }
.roksearch-wrapper { position: relative; }

body #roksearch_search_str,
.inputbox {
  width: 100%;
  padding: 9px 14px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  color: var(--text);
  font-size: 13px;
}
body #roksearch_search_str:focus,
.inputbox:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(246, 131, 26, .18);
}

body #roksearch_results {
  margin-top: 8px;
  background: var(--panel);
  border-radius: var(--radius);
}
body #roksearch_results:empty { display: none; }
body #roksearch_results h3,
body #roksearch_results .roksearch_header { font-size: 13px; }

#rokajaxsearch_tmp { display: none !important; }


/* ==========================================================================
   09. Footer
   ========================================================================== */

#rt-footer-surround {
  background: var(--light);
  border-top: 3px solid var(--orange);
}

#rt-footer { padding: 30px 0 20px; }
#rt-footer::after {
  content: "";
  display: table;
  clear: both;
}

/* footer sits on the light panel — invert the module chrome */
#rt-footer-surround .rt-module-surround {
  background: none;
  border: 0;
  padding: 0;
}
#rt-footer-surround .module-title {
  border-bottom-color: var(--light-line);
}
#rt-footer-surround .module-title .title { color: var(--ink); }
#rt-footer-surround .module-content { color: #4a5155; }
#rt-footer-surround .module-content strong { color: var(--ink); }
#rt-footer-surround a { color: var(--orange-2); }
#rt-footer-surround a:hover { color: var(--orange); }

#rt-copyright {
  background: var(--light-2);
  border-top: 1px solid var(--light-line);
  padding: 14px 0;
  color: #5b6367;
  font-size: 11.5px;
  text-align: center;
}
#rt-copyright a { color: var(--orange-2); }

/* Facebook slide-out tab: the inline <style> gives it offsets but the
   positioning lived in fbslider.css — without this it drops a 600px iframe
   into the footer flow. */
#fbtbTab {
  position: fixed;
  z-index: 200;
}
#fbtbTab .fbtbTabContent { max-width: 320px; }
#fbtbTab .joomla_sharethis { max-width: 300px; }
#fbtbTab .fbtbTabHandle a { display: block; width: 100%; height: 100%; }


/* ==========================================================================
   10. Utilities & housekeeping
   ========================================================================== */

.clear { clear: both; }
.tleft { text-align: left; }
.tright { text-align: right; }
.tcenter { text-align: center; }
.fleft { float: none; }        /* GK4 floats these paragraphs; not wanted here */
.fright { float: none; }
.fnone { float: none; }
.unvisible { display: none; }

/* Injected SEO spam in the footer (the dnnViewState() script and the
   "payday loans" paragraph) — hidden here, but REMOVE IT FROM THE TEMPLATE.
   See the note that came with this file. */
.dnn { display: none !important; }


/* ==========================================================================
   11. Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .rt-grid-8,
  .rt-grid-6,
  .rt-grid-4 {
    float: none;
    width: 100%;
    padding: 0;
  }
  #rt-sidebar-a { margin-top: 24px; }
  #rt-footer .rt-grid-6 + .rt-grid-6 { margin-top: 24px; }
  .rt-gallery-items img { max-height: 280px; }
}

@media (max-width: 640px) {
  #rt-header { padding: 14px 0 10px; }
  #rt-logo { width: 120px; height: 70px; }
  #rt-logo::after { font-size: 27px; }

  ul.menutop { flex-direction: column; }
  .menutop li.root > .item { padding: 12px 14px; }
  .fusion-submenu-wrapper {
    position: static;
    width: 100% !important;
    border: 0;
    border-top: 1px solid var(--panel-line);
    border-radius: 0;
    box-shadow: none;
  }

  #rt-mainbody .rt-module-surround,
  .box4 .rt-module-surround { padding: 18px; }

  .rt-gallery-items img { max-height: 200px; }
  a.layout7-title { font-size: 11px; padding: 5px 10px; }
  #fbtbTab { display: none; }
}


/* ==========================================================================
   12. Motion & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  #rt-navigation, #rt-gallery, #rt-sidebar-a, #fbtbTab,
  #rt-footer-surround { display: none; }
  body { background: #fff; color: #000; }
  .box4 .rt-module-surround,
  #rt-mainbody .rt-module-surround {
    background: none;
    border: 0;
    padding: 0;
  }
  h1, h2, h3, strong { color: #000; }
}