@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800&display=swap');

:root {
  --dark-blue:#103d71;
  --orange:#FFBF00;
  --yellow:#fecb1c;
  --bg-yellow:#FFE6A9;
}

/* some elements is header use these styles. disable these styles to edit some elements in the header template  */
@media only screen and (max-width: 767px) {
 .WaGadgetLoginButton .loginContainer.loginContainer .loginLink {
    display:none;
  }
.hide-mobile {
    display: none;
}
.hide-desktop {
    display:block;
}
.secondary-menu {
  width:100%;
  margin: 0 0 10px 0;
}
}

@media only screen and (min-width: 768px) {
.hide-mobile {
    display: block;
}
.hide-desktop {
    display:none;
}
}
/* end header styles */

body {
  background-color:#fff;
}

.bg-yellow {background-color:var(--bg-yellow)}

#galleria
{
 height: 400px; 
 width: 100%;
}

#outerdiv 
{ 
  height: 100%;
  width: 100%;
}

#iframe 
{
  width: 100%;
  position: absolute;
  top: 50px;
  bottom: 0px;
}

.make-dropdown-menu-visible {
  overflow: visible;
}

.button {
  display: inline-block;
  background:#FFBF00;
  color:#000;
  font-size:16px;
  padding: .4em .7em;
  text-decoration: none;
  border-radius: 4px;
}

.WaGadgetEventsStateDetails .pageTitleOuterContainer .eventsTitleContainer {
    clear: both;
    margin: 0 0 12px;
    padding: 20px 0 0;
      text-align:center;
}

.WaGadgetEventsStateDetails .pageTitleOuterContainer .eventsTitleContainer h1 {
font-weight: bold;
  color: #222;
}

h1,h2,h3,h4 {
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: bold;
}

h4 {
  font-style: normal;
  color:#007cf0 !important;
}

body, h1, h2, h3, h4  {
  font-family:Arial, Helvetica, sans-serif !important;
}


.feature-box h2 {
  margin:0;
  padding:10px
}

.feature-box h2 span {
  font-weight: normal;
  font-size: .8em;
  display: block;
}

.feature-box h2 a {
  text-decoration:none;
  display: block;
}

.fccc-footer li {
  list-style:none;
}

.fccc-footer ul {
  margin-left: 0;
}

.fccc-footer h3 {
  margin-bottom:20px;
  color:var(--dark-blue);
  font-size:18px;
}

.camera_thumbs_cont, .camera_wrap {
  background:#fff;
}

.menuInner {

}

.WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel {
display: flex;
align-content: center;
justify-content: space-between;
}

.WaGadgetMobilePanel .mobilePanel .menuInner ul.firstLevel,
.WaGadgetMobilePanel .mobilePanel .menuInner ul.secondLevel,
.WaGadgetMobilePanel .mobilePanel {
background: var(--dark-blue);
}

.menu-border {
  border-bottom:4px solid var(--orange);
   border-top:4px solid var(--orange);
}

.WaGadgetUpcomingEvents.upcomingEventsStyle002 ul li, .WaGadgetUpcomingEvents.upcomingEventsStyle005 ul li {
    padding: 8px 0 8px 16px;
    border-left: 4px solid var(--orange);
}

.zoneFooter3 {
background: var(--orange);
}

.zoneWAbranding {
  font-size: 0.8em;
  text-align: center;
  background: var(--orange);
  margin: 0;
}

#idFooterPoweredByContainer {
  text-align: center;
}


.WaGadgetEventsStateList .boxesList > li.boxesListItem   {
    margin: 40px 0 !important;
}

.hero p {margin:0;padding: 5px;font-weight:bold;font-size:1.2em}
.hero {background-color: #FFE6A9}

/* --- 0. PAGE BASICS ----------------------------------------------------- */
body:has(.foco-hero) {
  overflow-x: hidden;              /* stops the full-width hero causing sideways scroll */
  background-color: #FAF8F3;
  color: #22364B;
}

/* Existing CSS forces Arial on body and h1-h4 with !important, so we must too */
body:has(.foco-hero),
body:has(.foco-hero) h1,
body:has(.foco-hero) h2,
body:has(.foco-hero) h3,
body:has(.foco-hero) h4 {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
}

/* Test page only: hide the old slideshow (#id_ceVTbSC) and its mobile <hr> */
body:has(.foco-hero) #id_ceVTbSC,
body:has(.foco-hero) #id_NpwpgkW {
  display: none !important;
}

/* --- 1. HEADER ---------------------------------------------------------- */
body:has(.foco-hero) .zoneHeader1 {
  background: #FAF8F3;
}
body:has(.foco-hero) #id_igJqpP4 img {
  display: block;
  margin: 0 !important;            /* logo gadget has inline margin-right: 20px */
}

/* Secondary menu: Calendar / Join / Shop (#id_EEzqtO9) */
body:has(.foco-hero) .secondary-menu a {
  color: #082F52;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
}
body:has(.foco-hero) .secondary-menu a:hover {
  color: #D85C32;
}
/* Join becomes an orange pill */
body:has(.foco-hero) .secondary-menu a[href="/join"] {
  background: #FF791C;
  color: #FFFFFF;
  padding: 8px 18px;
  border-radius: 4px;
}
body:has(.foco-hero) .secondary-menu a[href="/join"]:hover {
  background: #D85C32;
  color: #FFFFFF;
}

/* Cart (#id_Ckq6ESd) and member login (#id_bNAWSno) */
body:has(.foco-hero) #id_Ckq6ESd a,
body:has(.foco-hero) #id_bNAWSno .loginLink {
  color: #082F52 !important;
  font-weight: 700;
}

/* --- 2. MAIN NAVIGATION (#id_kFcSkUC) ----------------------------------- */
body:has(.foco-hero) #id_kFcSkUC {
  margin-bottom: 0 !important;     /* gadget has inline margin-bottom: 20px */
  background: #082F52;
  border-top: 0;                   /* existing .menu-border adds yellow top and bottom */
  border-bottom: 4px solid #FF791C;
}
body:has(.foco-hero) .WaGadgetMenuHorizontal .menuBackground {
  background: #082F52 !important;
}
/* Existing CSS makes firstLevel a flex row with space-between; center it */
body:has(.foco-hero) .WaGadgetMenuHorizontal.HorizontalMenuStyle001 .menuInner ul.firstLevel {
  justify-content: center;
  gap: 28px;
}

/* Link text: target both <a> and <span>, plus the "≡" overflow item */
body:has(.foco-hero) .WaGadgetMenuHorizontal .firstLevel > li > .item > a,
body:has(.foco-hero) .WaGadgetMenuHorizontal .firstLevel > li > .item > a span {
  color: #FFFFFF !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
/* Hover, current page (li.sel), open dropdown parent */
body:has(.foco-hero) .WaGadgetMenuHorizontal .firstLevel > li:hover > .item > a,
body:has(.foco-hero) .WaGadgetMenuHorizontal .firstLevel > li:hover > .item > a span,
body:has(.foco-hero) .WaGadgetMenuHorizontal .firstLevel > li.sel > .item > a,
body:has(.foco-hero) .WaGadgetMenuHorizontal .firstLevel > li.sel > .item > a span {
  color: #FFC233 !important;
}
/* Dropdowns (.secondLevel) */
body:has(.foco-hero) .WaGadgetMenuHorizontal .secondLevel {
  background: #123F6B !important;
}
body:has(.foco-hero) .WaGadgetMenuHorizontal .secondLevel a,
body:has(.foco-hero) .WaGadgetMenuHorizontal .secondLevel a span {
  color: #FFFFFF !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
body:has(.foco-hero) .WaGadgetMenuHorizontal .secondLevel li:hover > .item > a,
body:has(.foco-hero) .WaGadgetMenuHorizontal .secondLevel li:hover > .item > a span {
  color: #FFC233 !important;
}
/* Mobile panel (.WaGadgetMobilePanel) is intentionally untouched in batch 1 */

/* --- 3. HERO (.foco-hero, custom HTML gadget) --------------------------- */
.foco-hero {
  position: relative;
  box-sizing: border-box;
  width: 100vw;                    /* break out of the 1200px content column */
  margin-left: calc(50% - 50vw);
  padding: 96px 24px 80px;
  background:
    linear-gradient(rgba(8,47,82,.78), rgba(8,47,82,.50)),
    url('/resources/Pictures/2026/foco-hero.jpg') center / cover no-repeat;
  color: #FFFFFF;
}
.foco-hero__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.foco-hero .foco-hero__kicker {
  margin: 0 0 14px;
  color: #FFC233 !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.foco-hero h2.foco-hero__title {
  margin: 0 0 18px;
  color: #FFFFFF !important;
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 800;
  line-height: 1.02;
  text-transform: uppercase;
}
.foco-hero .foco-hero__sub {
  max-width: 520px;
  margin: 0 0 30px;
  color: #FAF8F3 !important;
  font-size: 18px;
  line-height: 1.5;
}
.foco-hero a.foco-hero__cta {
  display: inline-block;
  margin-right: 22px;
  padding: 15px 34px;
  background: #FF791C;
  color: #FFFFFF !important;
  border-radius: 4px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.foco-hero a.foco-hero__cta:hover {
  background: #D85C32;
}
.foco-hero a.foco-hero__link {
  color: #FFFFFF !important;
  font-weight: 700;
  text-decoration: underline;
}
/* Retro stripes along the bottom edge (pure CSS, so the editor can't strip them) */
.foco-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  background: linear-gradient(
    #FFC233 0 8px,
    #FF791C 8px 16px,
    #D85C32 16px 24px
  );
}

@media only screen and (max-width: 767px) {
  .foco-hero { padding: 56px 20px 52px; }
  .foco-hero a.foco-hero__cta {
    display: block;
    margin: 0 0 18px;
    text-align: center;
  }
}

/* NAV FONT REFINEMENT, option B */
body:has(.foco-hero) .WaGadgetMenuHorizontal .firstLevel > li > .item > a,
body:has(.foco-hero) .WaGadgetMenuHorizontal .firstLevel > li > .item > a span {
  font-weight: 600 !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
}
body:has(.foco-hero) .WaGadgetMenuHorizontal .menuInner {
  padding-left: 20px;
}

/* ==========================================================================
   FoCo redesign: HEADER CLEANUP + FOOTER (batches 5 and 6 combined)
   Paste at the VERY BOTTOM of user.css. Use this INSTEAD of the separate
   batch 5 and batch 6 blocks (do not paste those as well).
   Works with or without the optional look blocks (2, 3 or 4).
   Scoped to pages containing .foco-hero. UNDO: delete this block.
   ========================================================================== */

/* --- 1. LOGO AND CLUB NAME ---------------------------------------------- */
body:has(.foco-hero) #id_igJqpP4 img {
  margin-right: 26px !important;     /* name was jammed against the logo */
}
body:has(.foco-hero) #id_igJqpP4 h1.header {
  font-size: 26px;
  margin-top: 42px !important;
  letter-spacing: .01em;
}

/* --- 2. HEADER UTILITIES IN ONE TIDY LINE (desktop only) ----------------- */
@media only screen and (min-width: 768px) {

  /* One flex row instead of the 60% / 31% / 8% table */
  body:has(.foco-hero) #id_cBlwEDN .WaLayoutTable,
  body:has(.foco-hero) #id_cBlwEDN .WaLayoutTable > tbody {
    display: block;
    width: 100%;
  }
  body:has(.foco-hero) #id_cBlwEDN .WaLayoutRow {
    display: flex;
    align-items: center;
    width: 100%;
    padding-right: 8px;
  }
  body:has(.foco-hero) #id_cBlwEDN .WaLayoutSeparator {
    display: none;
  }
  body:has(.foco-hero) #id_cBlwEDN .WaLayoutItem {
    display: block;
    width: auto !important;          /* cells have inline widths of 60/31/8% */
  }
  body:has(.foco-hero) #id_M4xHHBZ {
    flex: 1 1 auto;                  /* logo and name take the free space */
  }
  body:has(.foco-hero) #id_7ll2tfI,
  body:has(.foco-hero) #id_D53ZQhv {
    flex: 0 0 auto;
  }

  /* Calendar / Shop / Join, then social icons */
  body:has(.foco-hero) #id_3Oo8lv6 > div {
    display: flex;
    align-items: center;
    gap: 30px;
  }
  body:has(.foco-hero) #id_EEzqtO9 {
    order: 1;
    margin: 0 !important;            /* inline margin-top:15px / margin-right:20px */
  }
  body:has(.foco-hero) #id_3AFulKp {
    order: 2;
    margin: 0 !important;
  }
  body:has(.foco-hero) #id_3AFulKp .gadgetStyleBody {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 !important;
  }
  body:has(.foco-hero) #id_3AFulKp img {
    float: none !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0 !important;
    object-fit: contain;
    filter: grayscale(1);            /* quiet gray until hovered */
    opacity: .7;
    transition: filter .2s ease, opacity .2s ease;
  }
  body:has(.foco-hero) #id_3AFulKp a:hover img {
    filter: none;
    opacity: 1;
  }

  /* Menu links in one line with even spacing, Join (the call to action) last */
  body:has(.foco-hero) #id_EEzqtO9 .outerContainer,
  body:has(.foco-hero) #id_EEzqtO9 .container {
    width: auto !important;
    overflow: visible;
  }
  body:has(.foco-hero) #id_EEzqtO9 ul {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
  }
  body:has(.foco-hero) #id_EEzqtO9 li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none;
  }
  body:has(.foco-hero) #id_EEzqtO9 li:has(a[href="/join"]) {
    order: 3;
  }
  body:has(.foco-hero) #id_EEzqtO9 a {
    padding: 0 !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .12em;
  }
  body:has(.foco-hero) #id_EEzqtO9 a[href="/join"] {
    padding: 9px 22px !important;
    border-radius: 4px;
  }

  /* Cart and login */
  body:has(.foco-hero) #id_jVDEoHH > div {
    display: flex;
    align-items: center;
    gap: 22px;
  }
  body:has(.foco-hero) #id_Ckq6ESd,
  body:has(.foco-hero) #id_bNAWSno {
    margin: 0 !important;
  }
  body:has(.foco-hero) #id_Ckq6ESd a {
    font-size: 13px;
    text-decoration: none;
  }
  body:has(.foco-hero) #id_Ckq6ESd a:hover {
    color: #D85C32 !important;
  }
}

/* --- 3. FOOTER: yellow to navy ------------------------------------------ */
/* The footer has an inline yellow background, so !important is required */
body:has(.foco-hero) .zoneFooter3,
body:has(.foco-hero) .zoneWAbranding,
body:has(.foco-hero) .fccc-footer {
  background-color: #082F52 !important;
}
body:has(.foco-hero) .fccc-footer {
  border-top: 5px solid #FF791C;
}
body:has(.foco-hero) .fccc-footer h3 {
  color: #FFC233 !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
body:has(.foco-hero) .fccc-footer ul {
  margin: 0;
  padding: 0;
}
body:has(.foco-hero) .fccc-footer li {
  list-style: none !important;
  margin: 0 0 10px;
  color: #FAF8F3;
}
body:has(.foco-hero) .fccc-footer a {
  color: #FAF8F3 !important;
  text-decoration: none;
}
body:has(.foco-hero) .fccc-footer a:hover {
  color: #FFC233 !important;
  text-decoration: underline;
}
body:has(.foco-hero) .zoneWAbranding,
body:has(.foco-hero) .zoneWAbranding a {
  color: rgba(250,248,243,.7) !important;
}