/* ==========================================================================
   rckgm-clubrunner.css
   Rotary Club of Kowloon Golden Mile (RCKGM)
   ClubRunner public-site OVERRIDE — not a full theme.

   Upload: Member Area → Website → Website Settings → Upload CSS
           (Nova: Website Style Sheets → Add Website CSS File)
   Theme Setting: leave ENABLED. Do not Disable Theme Setting.
   Activate last: upload without Make Active, preview, then Make Active.
   Recovery: deactivate this file; keep the system theme enabled.

   Written for the live club theme: BootstrapLayout-1 / Millennium / Gold
   (portal.clubrunner.ca/13282). Selectors are ClubRunner Next-Gen classes
   from the public HTML — not widget GUIDs.

   Brand tokens: Rotary Brand Center / Logos at a Glance (Apr 2025).
   Azure is current #0067C8 (not the legacy #0050A2 still in some themes).
   ========================================================================== */

:root {
  --rckgm-azure: #0067c8;
  --rckgm-azure-dark: #0056a8;
  --rckgm-royal: #17458f;
  --rckgm-gold: #f7a81b;
  --rckgm-gold-dark: #d48d0f;
  --rckgm-sky: #00a2e0;
  --rckgm-powder: #b9d9eb;
  --rckgm-charcoal: #54565a;
  --rckgm-cloud: #d6d1ca;
  --rckgm-white: #ffffff;
  --rckgm-ink: #222222;
  --rckgm-font: "Open Sans", Helvetica, Arial, sans-serif;
  --rckgm-display: "Open Sans Condensed", "Open Sans", Helvetica, Arial, sans-serif;
  --rckgm-serif: Georgia, "Times New Roman", Times, serif;
}

/* --------------------------------------------------------------------------
   1. Type — light touch. Theme already loads Open Sans.
   -------------------------------------------------------------------------- */

body#bodyContent {
  font-family: var(--rckgm-font);
  color: var(--rckgm-ink);
}

.PageWidget .widget-title,
.PageWidget .MainWidgetWrapper .boxHeaderContainer1 .widget-title,
.predefined-title .inlineEditor {
  font-family: var(--rckgm-display);
  font-weight: 700;
  color: var(--rckgm-azure);
}

/* --------------------------------------------------------------------------
   2. Login / search strip
   -------------------------------------------------------------------------- */

.login-band {
  background-color: var(--rckgm-royal);
}

.loginbar,
.loginbar a,
.login-area a,
.login-area .logout-link {
  color: var(--rckgm-white);
}

.loginbar a:hover,
.loginbar a:focus,
.login-area a:hover,
.login-area a:focus {
  color: var(--rckgm-gold);
}

.login-band #searchString {
  border-color: rgba(255, 255, 255, 0.35);
}

/* --------------------------------------------------------------------------
   3. Header + nav  (Millennium Gold bar → Rotary Azure)
   -------------------------------------------------------------------------- */

nav.navbar.navbar-default {
  background-color: var(--rckgm-azure);
  border-color: transparent;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-text,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a.menu-item,
a.menu-item.menu-item-primary {
  color: var(--rckgm-white);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: var(--rckgm-royal);
  background-color: var(--rckgm-gold);
}

.navbar-default .navbar-nav > .disabled > a,
.navbar-default .navbar-nav > .disabled > a:hover,
.navbar-default .navbar-nav > .disabled > a:focus {
  color: rgba(255, 255, 255, 0.45);
  background-color: transparent;
}

.navbar-default .dropdown-menu {
  border-top: 3px solid var(--rckgm-gold);
}

.navbar-default .dropdown-menu > li > a {
  color: var(--rckgm-royal);
  font-family: var(--rckgm-font);
}

.navbar-default .dropdown-menu > li > a:hover,
.navbar-default .dropdown-menu > li > a:focus {
  color: var(--rckgm-white);
  background-color: var(--rckgm-azure);
}

.navbar-default .navbar-toggle {
  border-color: rgba(255, 255, 255, 0.65);
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: var(--rckgm-royal);
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--rckgm-white);
}

/* --------------------------------------------------------------------------
   4. Brand / logo — size only. Do not filter or recolor the lockup.
   -------------------------------------------------------------------------- */

.navbar-brand img,
a.navbar-brand img {
  max-height: 56px;
  width: auto;
  filter: none;
}

/* --------------------------------------------------------------------------
   5. Hero / carousel — copy contrast only
   -------------------------------------------------------------------------- */

.MainWidgetWrapper.carousel .carousel-content,
.MainWidgetWrapper.carousel .content-block {
  text-shadow: 0 1px 2px rgba(23, 69, 143, 0.45);
}

.MainWidgetWrapper.carousel .swiper-pagination-bullet-active {
  background: var(--rckgm-gold);
}

/* --------------------------------------------------------------------------
   6. Cards / events
   -------------------------------------------------------------------------- */

.card.card-default.card-cr {
  border-top: 3px solid var(--rckgm-azure);
  box-shadow: 0 1px 2px rgba(23, 69, 143, 0.08);
}

.card.card-cr .card-title,
.card.card-cr .card-title a {
  color: var(--rckgm-royal);
}

.card.card-cr .card-title a:hover,
.card.card-cr .card-title a:focus {
  color: var(--rckgm-azure);
}

.card.card-cr .event-date,
.card.card-cr .card-text-meta {
  color: var(--rckgm-charcoal);
}

/* --------------------------------------------------------------------------
   7. Buttons / CTAs
   Gold is a jewel colour — large buttons only, not body text.
   -------------------------------------------------------------------------- */

.btn-primary,
.btn.btn-primary {
  color: var(--rckgm-white);
  background-color: var(--rckgm-gold);
  border-color: var(--rckgm-gold);
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  color: var(--rckgm-white);
  background-color: var(--rckgm-gold-dark);
  border-color: var(--rckgm-gold-dark);
}

.btn-info,
.btn.btn-info,
a.btn.button-link.btn-info {
  color: var(--rckgm-white);
  background-color: var(--rckgm-azure);
  border-color: var(--rckgm-azure);
}

.btn-info:hover,
.btn-info:focus,
.btn.btn-info:hover,
.btn.btn-info:focus,
a.btn.button-link.btn-info:hover,
a.btn.button-link.btn-info:focus {
  color: var(--rckgm-white);
  background-color: var(--rckgm-azure-dark);
  border-color: var(--rckgm-azure-dark);
}

.predefined-button .btn,
.predefined-button a.btn {
  font-family: var(--rckgm-display);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   8. Club info
   -------------------------------------------------------------------------- */

.MainWidgetWrapper.ClubInfo .club-greeting,
.MainWidgetWrapper.ClubInfo .club-greeting.themeColorDark {
  color: var(--rckgm-royal);
  font-family: var(--rckgm-display);
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

footer.footer-band {
  background-color: var(--rckgm-royal);
  color: var(--rckgm-white);
}

footer.footer-band .WebsiteFooter,
footer.footer-band .WebsiteFooter p,
footer.footer-band .website-footer {
  color: var(--rckgm-white);
}

footer.footer-band .WebsiteFooter a,
footer.footer-band .website-footer a {
  color: var(--rckgm-powder);
}

footer.footer-band .WebsiteFooter a:hover,
footer.footer-band .WebsiteFooter a:focus,
footer.footer-band .website-footer a:hover,
footer.footer-band .website-footer a:focus {
  color: var(--rckgm-gold);
}

.system-footer {
  color: var(--rckgm-white);
}

.system-footer a {
  color: var(--rckgm-powder);
}

.system-footer a:hover,
.system-footer a:focus {
  color: var(--rckgm-gold);
}

/* --------------------------------------------------------------------------
   10. Focus — keep a visible ring (do not outline: none)
   -------------------------------------------------------------------------- */

a:focus,
button:focus,
.btn:focus,
.navbar-default .navbar-nav > li > a:focus,
.login-band #searchString:focus {
  outline: 2px solid var(--rckgm-gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   11. Mobile — ClubRunner Next-Gen collapses near 768px
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: var(--rckgm-white);
  }

  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: var(--rckgm-royal);
    background-color: var(--rckgm-gold);
  }

  .navbar-default .navbar-toggle {
    min-width: 44px;
    min-height: 44px;
  }

  .navbar-brand img,
  a.navbar-brand img {
    max-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .MainWidgetWrapper.carousel .swiper-container,
  .MainWidgetWrapper.carousel .swiper-slide {
    transition: none;
  }
}