@import url('https://fonts.googleapis.com');

body {
    background-color: #fff;
}

/* ==========================================================================
   TEST NAVIGATION - STAGING OVERRIDES (Scoped Only to Gadget #id_g2q9eC3) */

/* 1. APPLY NEW FONT FAMILY, LETTER-SPACING, AND SIZE */
#id_g2q9eC3 .menuInner ul.firstLevel li div.item a,
#id_g2q9eC3 .menuInner ul.firstLevel li div.item a span {
  font-family: 'Roboto','Inter', 'Helvetica Neue', sans-serif !important; /* Uses your clean typography choices */
  font-size: 15px !important;                 /* Streamlined modern font size */
  letter-spacing: 0.05em !important;          /* Clean tracking for a modern UX feel */
  text-transform: uppercase !important;       /* Optional: crisp uppercase aesthetic */
}

/* 2. CORRECTED ITEM SPACING (PADDING) */
#id_g2q9eC3 .menuInner ul.firstLevel > li {
  padding-left: 5px !important;             /* Balanced horizontal breathing room */
  padding-right: 5px !important;
}

/* 3. CORRECTED ACTIVE PAGE INDICATOR (Targets Wild Apricot's native selection markers) */
#id_g2q9eC3 .menuInner ul.firstLevel > li.sel div.item a,
#id_g2q9eC3 .menuInner ul.firstLevel > li.sel div.item a span,
#id_g2q9eC3 .menuInner ul.firstLevel > li[class*="active"] div.item a span {
  color: #FF1D25 !important;                 /* Turns the text link to your signature red */
  font-weight: 700 !important;               /* Gives a sharp, definitive visual anchor */
}

  /* ... Section 4, 5, 6 & 7 rules follow down below ... */
/* ========================================================================== Start Button 001 customization */

a.stylizedButton.buttonStyle001 {
  border: 2px solid #0080FF;
  border-radius: 30px;
}

a.buttonStyle001, a:link.buttonStyle001 {
  padding: 14px 20px;
  min-width:70px;
  background:#0080FF;
  font-family:'Ubuntu','Arial',sans-serif;
  font-size: 16px;
}

a.buttonStyle001:hover, a:link.buttonStyle001:hover {
  background: #191414;
  border: 2px solid #191414;
}

a.buttonStyle001:active, a:link.buttonStyle001:active {
  background: #191414;
  border: 2px solid #191414;
}

@media screen and (max-width: 767px) {
  html:not([class*="WaPlaceHolder"]) a.buttonStyle001 {
  border-width: 2px;
  font-size: 15px;
  }
}

/* End button 001 end */

/* Start Button 007 customization */
a.stylizedButton.buttonStyle007 {
  border: 2px solid #191414;
  border-radius: 30px;
}

a.buttonStyle007, a:link.buttonStyle007 {
  padding: 14px 20px;
  min-width:70px;
  background: transparent;
}

@media screen and (max-width: 767px) {
  html:not([class*="WaPlaceHolder"]) a.buttonStyle007 {
    padding: 14px 20px;
  }
}
/* ========================================================================== END Button 001 customization */

/* ==========================================================================
   DESKTOP OVERRIDES (Above 767px - Perfectly Balanced Columns)
   ========================================================================= */
@media (min-width: 768px) {
  
  /* 1. Equalize both images to match heights perfectly */
  #id_eU4k5TK img, 
  #id_r9zpr2d img {
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;       
    object-fit: cover !important;   
    display: block !important;
  }

  /* 2. FORCE THE TABLE ROW TO ACT AS A RESPONSIBL FLUID GRID CONTAINER */
  tr[data-componentid="za81A2I_row"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Forces 2 perfectly equal fluid columns */
    align-items: stretch !important; /* Dynamically stretches both columns to match exactly */
  }

  /* Hide Wild Apricot's native blank middle separator column since grid handles spacing */
  tr[data-componentid="za81A2I_row"] > td.WaLayoutSeparator {
    display: none !important;
  }

  /* 3. Convert both column grid units into individual flexbox columns */
  #id_AMQOoK1, 
  #id_MVBIHc1,
  #id_ERlmeqI,
  #id_ovUpxzI,
  #id_ERlmeqI > div,
  #id_ovUpxzI > div {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* Forces inner items to grow into the stretched box */
    width: auto !important; /* Overrides the hardcoded 50% attributes */
  }

  /* 4. Push the "Learn More" button gadgets to the absolute bottom line */
  #id_LKPEGsX,
  #id_vMzNKnk {
    margin-top: auto !important; /* Absorbs the remaining vertical space */
    padding-top: 25px !important;   
  }
}

/* ==========================================================================
   MOBILE OVERRIDES (Below 767px - Smooth Proportional Resizing)
   ========================================================================== */
@media (max-width: 767px) {
  /* parent row to move logo on mobile on top*/
  .zonePlace .zoneHeader2 {
  display: flex;
  flex-direction: column; /* Stacks elements vertically */
}

  #id_sDjAIWt {
  order: -1; /* Moves this element to the very top above mobile panel */
}

  
  /* IMAGE 1: Background Image Container */
  #id_ybWcxXD {
    background-size: contain !important;
    height: auto !important;
    min-height: 200px !important;
    aspect-ratio: 16 / 9 !important;
  }
  #id_ybWcxXD .gadgetStyleBody {
    height: auto !important;
  }

  /* IMAGES 2, 3, 4, & 5: Grouped HTML <img> Tags (Naturally Resizing) */
  /* Added #id_eU4k5TK (the left column image) into your mobile layouts list */
  #id_sdJhM2B, 
  #id_rRPDNxk,
  #id_r9zpr2d,
  #id_eU4k5TK {
    width: 100% !important;
  }

  /* Force all inline image elements to scale down and center proportionally together */
  #id_sdJhM2B img, 
  #id_rRPDNxk img,
  #id_r9zpr2d img,
  #id_eU4k5TK img {
    width: 100% !important;        
    max-width: 100% !important;    
    height: auto !important;       
    display: block !important;
    margin-left: auto !important;  
    margin-right: auto !important;
  }

}

/* ==========================================================================
   NAVBAR - DESKTOP OVERRIDES (Above 767px - Perfectly Balanced Columns)
   ========================================================================== */
.zonePlace.zoneHeader2 > DIV {
  background-color: #fff;
  color: #191414;
}

#id_sDjAIWt [class^="WaLayoutContainer"] {
  margin-bottom: 0px;
}

@media (min-width: 768px) {
  /* 1. FORCE TABLE ROW TO ACT AS A FLUID GRID CONTAINER */
  tr[data-componentid="sDjAIWt_row"] {
    display: grid !important;
    grid-template-columns: 1fr 2fr 1fr !important; /* Adjusted middle column ratio to give links room */
    align-items: center !important;                /* VERTICAL CENTER: Centers columns perfectly */
  }

  tr[data-componentid="sDjAIWt_row"] > td.WaLayoutSeparator {
    display: none !important;
  }

  /* 2. RESET TABLE CELLS & FORCE VERTICAL CENTER */
  #id_ENyyya6, 
  #id_OIjICQY, 
  #id_z2Ce6lP {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;            /* Vertically centers layout boxes inside cells */
    align-items: stretch !important;
    width: auto !important;                        
    height: 100% !important;
  }

  /* 3. LOGO TYPOGRAPHY VERTICAL CENTER ALIGNMENT & FONT SWAP */
  #id_2AVtE3K,
  #id_1Zzq7ND,
  #id_1Zzq7ND p,
  #id_1Zzq7ND span,
  #id_1Zzq7ND font {
    display: flex !important;
    align-items: center !important;
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif !important; /* Forces Roboto */
    font-size: 24px !important;
    line-height: 34px;
    letter-spacing: 0.03em !important;
    height: 100% !important;
    margin-bottom: 0px !important;
  }

  /* 3. LOGO TYPOGRAPHY VERTICAL CENTER ALIGNMENT (LEFT COLUMN) */
  #id_2AVtE3K,
  #id_1Zzq7ND,
  #id_1Zzq7ND p {
    display: flex !important;
    align-items: center !important;                /* VERTICAL CENTER: Snaps the text logo to the exact middle */
    height: 100% !important;
    margin-bottom: 0px !important;
  }

  /* 4. STRIP NATIVE BLACK BACKGROUNDS (MIDDLE COLUMN) */
  #id_OIjICQY,                            
  #id_BKElQWB,
  #id_g2q9eC3,
  #id_g2q9eC3 .menuBackground,                    /* TARGETED: Strips Wild Apricot's native background box */
  #id_g2q9eC3 .menuInner {                       /* TARGETED: Strips inner theme layer backgrounds */
    background-color: #ffffff !important;         /* Overrides native theme color to solid white */
    background: #ffffff !important;
  }

  /* 5. GADGETS AND HORIZONTAL MENUS CONTAINER FLEX CONFIGURATION */
  #id_g2q9eC3 .menuInner > ul.firstLevel {
    display: flex !important;
    align-items: center !important;                
    justify-content: center !important;           /* Horizontally centers links inside the middle grid space */
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
  }

  /* 6. PUSH LOGIN ICON FLUSH RIGHT (RIGHT COLUMN) */
  #id_z2Ce6lP,
  #id_roBTqob,
  #id_roBTqob > div,
  .loginContainer {
   /* display: flex !important;
    justify-content: flex-end !important;          /* Anchors login module flush against the right margin */
   /* align-items: center !important; */
    width: auto !important;
  }

  /* 7. TYPEFACE STYLING OVERRIDES (BLACK NAV LINKS) */
  .horizontalMenuContainer ul.firstLevel li div.item a,
  .horizontalMenuContainer ul.firstLevel li div.item a span,
  #id_sDjAIWt a {
    color: #000000 !important;  /* Crisp black type color */
    background: transparent !important; /* overrides login bg and links bg color */
     }                

  /* Smooth transition for hover styles */
  .horizontalMenuContainer ul.firstLevel li div.item a:hover span {
    color: #FF1D25 !important;                     /* Accent hover color */
  }
}