/* user.css */ 
@import url('https://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; 
  font-size: 14px !important;                 
  letter-spacing: 0.05em !important;          
  text-transform: uppercase !important;       
}

/* 3. CORRECTED ACTIVE PAGE INDICATOR */
#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;                 
  font-weight: 700 !important;               
}

/* ========================================================================== 
   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;
  }
}

/* ========================================================================== 
   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;
  }
}

/* ==========================================================================
   DESKTOP OVERRIDES - EXHIBITS ROW (Above 767px)
   ========================================================================= */
@media (min-width: 768px) {
  #id_eU4k5TK img, 
  #id_r9zpr2d img {
    width: 100% !important;
    max-width: 100% !important;
    height: 300px !important;       
    object-fit: cover !important;   
    display: block !important;
  }

  tr[data-componentid="za81A2I_row"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; 
    align-items: stretch !important; 
  }

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

  #id_AMQOoK1, 
  #id_MVBIHc1,
  #id_ERlmeqI,
  #id_ovUpxzI,
  #id_ERlmeqI > div,
  #id_ovUpxzI > div {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; 
    width: auto !important; 
  }

  #id_LKPEGsX,
  #id_vMzNKnk {
    margin-top: auto !important; 
    padding-top: 25px !important;   
  }
}
/* ==========================================================================
   MOBILE OVERRIDES - ALL CONTENT (Below 767px)
   ========================================================================== */
@media (max-width: 767px) {

  /* 1. OVERRIDE NATIVE MOBILE HEADER BACKDROP BAR */
  .phoneView .mobilePanel,
  .mobilePanel,
  .mobileHeaderBar {
    background-color: #ffffff !important;   /* Solid white canvas header */
    background: #ffffff !important;
    border-bottom: 1px solid #eaeaea !important;
    display: flex !important;
    flex-direction: row !important;         /* Pushes content layout on a single row */
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0px 15px 0px 15px !important;
  }

  /* 2. STYLE THE HAMBURGER TOGGLE BUTTON DESIGN */
  .mobilePanel .menuButton,
  .mobilePanel .mobileMenuIcon {
    color: #000000 !important;              /* Crisp black icon stripes */
    background: transparent !important;
    border: none !important;
  }

  /* 3. MOBILE MENU DROPDOWN DRAWER EXPANSION CONTAINER */
  .mobilePanel .mobileMenu,
  .mobilePanel .mobileMenuContainer,
  .mobilePanel ul,
  .mobilePanel li {
    background-color: #ffffff !important;   /* Clean white background inside the drawer block */
    background: #ffffff !important;
    border: none !important;
  }

  /* 4. DYNAMIC TARGETING FOR MOBILE NAVIGATION TYPOGRAPHY LINKS */
  .mobilePanel ul li a,
  .mobilePanel ul li a span,
  .mobilePanel .mobileMenu a {
    color: #000000 !important;              /* Sharp black links inside phone list viewport */
    font-family: 'Roboto', 'Inter', sans-serif !important;
    font-size: 16px !important;
    text-transform: uppercase !important;   /* Matches desktop tracking aesthetic */
    letter-spacing: 0.05em !important;
    padding-top: 14px !important;           /* Larger clickable surfaces for fingers */
    padding-bottom: 14px !important;
    display: block !important;
  }

  /* 5. ACTIVE TAB HIGHLIGHT & TOUCH INTERACTIVE RESPONSES */
  .mobilePanel ul li.sel a,
  .mobilePanel ul li.sel a span,
  .mobilePanel ul li a:active span,
  .mobilePanel ul li a:focus span {
    color: #FF1D25 !important;              /* Shifts cleanly to red on click/active tabs */
    font-weight: 700 !important;
  }

  /* 6. STYLE THE HIDDEN MOBILE LOG IN COMPONENT UNTIL TRIGGERED */
  .mobilePanel .loginLink,
  .mobilePanel .mobileLogin {
    color: #000000 !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
  }

  /* ==========================================================================
     IMAGE CONTAINER LIQUID RULES (Your existing proportional scales)
     ========================================================================== */
  #id_ybWcxXD {
    background-size: contain !important;
    height: auto !important;
    min-height: 200px !important;
    aspect-ratio: 16 / 9 !important;
  }
  #id_ybWcxXD .gadgetStyleBody {
    height: auto !important;
  }

  #id_sdJhM2B, 
  #id_rRPDNxk,
  #id_r9zpr2d,
  #id_eU4k5TK {
    width: 100% !important;
  }

  #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;
  }
    .WaGadgetMobilePanel .mobilePanel .mobilePanelButton {
    color: black;
  }

[class^="WaLayoutContainer"] {
  margin-bottom: 0px;
  }
}
  
/* ==========================================================================
   NAVBAR - DESKTOP OVERRIDES (Above 767px - Balanced Layout)
   ========================================================================== */
.zonePlace.zoneHeader2 > DIV {
  background-color: #fff;
  color: #191414;
}

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

@media (min-width: 768px) {
    /* 1. FORCE ROW INTO TWO FLUID COLUMNS (Logo Column Removed) */
  tr[data-componentid="sDjAIWt_row"] {
    display: flex !important;                      
    flex-direction: row !important;
    align-items: center !important;                
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0px !important;
  }

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

  /* 2. RE-ALLOCATE WIDTHS (Completely hide the old left column) */
  #id_ENyyya6 { 
    display: none !important;                      /* Hides the old separate text logo */
  }
  #id_OIjICQY { 
    width: 75% !important;                         /* Expands navigation container to the left wall */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;            
    align-items: stretch !important;
    height: auto !important;
    min-height: 0px !important;
  }
  #id_z2Ce6lP { 
    width: 25% !important;                         /* Keeps login widget compact on the right */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;            
    align-items: stretch !important;
    height: auto !important;
    min-height: 0px !important;
  }

  /* 3. VERTICALLY CENTER BRAND TEXT LOGO (LEFT COLUMN) */
  #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; 
    font-size: 24px !important;
    line-height: 1 !important;
    letter-spacing: 0.03em !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
  }

  /* 4. STRIP NATIVE OVERRIDE THEME BACKGROUNDS (MIDDLE COLUMN) */
  #id_OIjICQY,                            
  #id_BKElQWB,
  #id_g2q9eC3,
  #id_g2q9eC3 .menuBackground,                    
  #id_g2q9eC3 .menuInner {                       
    background-color: #ffffff !important;         
    background: #ffffff !important;
    height: auto !important;                       /* Shuts down Firefox height bloat */
    min-height: 0px !important;
  }

  /* 5. HORIZONTAL LINKS CONTAINER SETUP WITH ASYMMETRICAL FLEX SPLIT */
  #id_g2q9eC3 .menuInner > ul.firstLevel {
    display: flex !important;
    align-items: center !important;                
    justify-content: flex-start !important;        /* Switched to start so items can separate */
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    margin-bottom: 0px !important;
    line-height: normal !important;                
    padding-left: 0px !important;                  /* Allows Inkspots link to sit flush against the far left */
  }

  /* TARGET THE SECOND LINK ("About Us") AND PUSH IT RIGHT */
  #id_g2q9eC3 .menuInner > ul.firstLevel > li:nth-child(2) {
    margin-left: auto !important;                  /* MAGIC LINE: Pushes this item and all following items flush right */
  }

  /* Make the first link ("Inkspots") look like your prominent brand asset */
  #id_g2q9eC3 .menuInner > ul.firstLevel > li:first-child div.item a span {
    font-size: 24px !important;                    /* Keeps your original prominent logo size */
    font-weight: 700 !important;                   /* Keeps it bold like your original brand layout */
    letter-spacing: 0.03em !important;
    text-transform: none !important;               /* Keeps original casing format */
  }

  /* 6. FORCE LOGIN ICON FLUSH RIGHT & REMOVE HIDDEN TEXT SPACE */
  #id_z2Ce6lP,
  #id_roBTqob,
  #id_roBTqob > div {
    display: flex !important;
    justify-content: flex-end !important;          
    align-items: baseline !important;             /* Keeps the icon track locked to the text baseline */
    width: auto !important;
  }

  /* Force Wild Apricot's inner container to snap to the right edge */
  .loginContainer,
  .loginContainerInner {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
  }

  /* Target the specific login link icon box */
  .WaGadgetLoginForm .loginContainer.loginContainer .loginLink {
    margin-left: auto !important;                  /* Hard-anchors the box flush right */
    line-height: 50px !important;                  /* FIXED: Matches height to vertically center the icon graphic */
    text-indent: -9999px !important;               /* MODERN METHOD: Safely hides the text letters off-screen */
    font-size: 0px !important;                     /* Shrinks text characters to nothing */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }


  /* 7. GLOBAL TYPEFACE COLORS FOR INTERACTIVE LINK STATES */
  .horizontalMenuContainer ul.firstLevel li div.item a,
  .horizontalMenuContainer ul.firstLevel li div.item a span,
  #id_sDjAIWt a {
    color: #000000 !important;                     
  }

  .horizontalMenuContainer ul.firstLevel li div.item a:hover span,
  .loginContainer .loginLink:hover {
    color: #FF1D25 !important;                     
    opacity: 0.8 !important;
  }
  /* ==========================================================================
     7. CORRECTED LINK HOVER STATES (Clean Text Swaps)
     ========================================================================== */
  
  /* Strip Wild Apricot's dark background blocks on hover/active states */
  #id_g2q9eC3 .menuInner ul.firstLevel li:hover,
  #id_g2q9eC3 .menuInner ul.firstLevel li div.item:hover,
  #id_g2q9eC3 .menuInner ul.firstLevel li.hover div.item,
  #id_g2q9eC3 .menuInner ul.firstLevel li div.item a:hover {
    background-color: transparent !important;    /* Strips the dark block wrapper completely */
    background: transparent !important;
  }

  /* Swap text link color cleanly to signature red on hover */
  #id_g2q9eC3 .menuInner ul.firstLevel li div.item a:hover,
  #id_g2q9eC3 .menuInner ul.firstLevel li div.item a:hover span,
  .loginContainer .loginLink:hover {
    color: #FF1D25 !important;                   /* Accent red text transition */
    background-color: transparent !important;
  }
}

/* ==========================================================================
   FIREFOX RESPONSIVE FIX (Prevents dynamic white space gap layout explosion)
   ========================================================================== */

/* 1. Force the parent table body layout wrappers to drop legacy height math */
.zonePlace.zoneHeader2 table,
.zonePlace.zoneHeader2 tbody,
#id_sDjAIWt table,
#id_sDjAIWt tbody {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* 2. Patch the grid row container so Firefox explicitly calculates its box boundaries */
tr[data-componentid="sDjAIWt_row"] {
  min-height: 0px !important;    /* Breaks Firefox's cached cell-height memory loop */
  height: auto !important;        /* Re-locks the frame tightly to the logo/links */
}