/* ===========================
   PAGE WIDTH
   =========================== */
body,
.mLayout,
#mLayout,
.mBody {
  max-width: 1200px !important; /* or 100% if you prefer full width */
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Remove unwanted container width limits */
.WaGadget,
.WaContainer,
.WaContent,
.gadgetStyleNone,
.row,
.col {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Optional page-specific width */
#id_YourPageId,
.custom-width-box {
  width: 100% !important;
}

/* ===========================
   BUTTON COLORS
   =========================== */
.navigationOuterContainer .navigationContainer input.nextButton,
.navigationOuterContainer .navigationContainer input.typeButton,
.navigationOuterContainer .navigationContainer input[type=submit],
.loginButton,
.typeButton,
input[type=submit] {
  background-color: #1c4777 !important;
  color: #ffffff !important;
}

.navigationOuterContainer .navigationContainer input.nextButton:hover,
.navigationOuterContainer .navigationContainer input.typeButton:hover,
.navigationOuterContainer .navigationContainer input[type=submit]:hover,
.loginButton:hover,
.typeButton:hover,
input[type=submit]:hover {
  background-color: #1c4777 !important;
}

/* ===========================
   LOGIN / LOGOUT BUTTONS
   =========================== */
.WaGadgetLoginButton .loginLink,
.WaGadgetLoginForm .loginLink {
  background: #e5ecf1d3 !important;
  color: white !important;
}

.WaGadgetLoginButton .loginLink:hover,
.WaGadgetLoginForm .loginLink:hover {
  background: #2f3a3d !important;
}

/* Logout (authenticated) */
.WaGadgetLoginButton .authenticated .loginLink,
.WaGadgetLoginForm .authenticated .loginLink {
  background: 0 !important;
  color: #2f3a3d !important;
}

.WaGadgetLoginButton .authenticated .loginLink:hover,
.WaGadgetLoginButton .authenticated .loginLink.hover,
.WaGadgetLoginForm .authenticated .loginLink:hover,
.WaGadgetLoginForm .authenticated .loginLink.hover {
  background: #2f3a3d !important;
  color: white !important;
}
/* ===========================
   Replace Author Name
   =========================== */

/* Hide original author text */
.WaGadgetBlog .postedBy,
.WaGadgetBlog .author,
.WaGadgetBlog .postedByLink,
.WaGadgetBlog .authorName {
    font-size: 0 !important; /* hides the original text */
}

/* Insert custom text in blog posts */
.WaGadgetBlog .postedBy:after,
.WaGadgetBlog .author:after,
.WaGadgetBlog .postedByLink:after,
.WaGadgetBlog .authorName:after {
    content: "Posted by NAFIC Home Office";
    font-size: 12px !important;
    color: #333;            /* adjust color if needed */
    font-style: italic;     /* optional — remove if you want normal text */
}

/* Recent Blog Posts gadget (sidebar or list) */
.WaGadgetRecentBlogPosts .author,
.WaGadgetRecentBlogPosts .postedByLink {
    font-size: 0 !important;
}

.WaGadgetRecentBlogPosts .author:after,
.WaGadgetRecentBlogPosts .postedByLink:after {
    content: "Posted by NAFIC Home Office";
    font-size: 11px !important;
    color: #333;
    font-style: italic;
}
/* ===========================
   IMAGE CLEANUP
   =========================== */
.wa-gadget-image img,
.kaleidoscope-photo img {
  background-color: white !important;
  object-fit: cover !important;
}

img {
  background-color: white !important;
  object-fit: cover;
}

img[style*="border"] {
  border: none !important;
}

img,
.gadgetImage img,
.photo,
.photo img {
  background: white !important;
  box-shadow: none !important;
}
/* ===========================
   NAFIC CARD (System Page Safe)
   =========================== */
.nafic-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    font-family: Inter, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
    box-sizing: border-box;
    
    /* CHANGED: This prevents the "Cutting Off" issue */
    overflow: visible !important; 
}

/* MOBILE ADJUSTMENTS */
@media only screen and (max-width: 600px) {
    .nafic-card {
        padding: 15px !important;
        border-radius: 10px;
        
        /* Ensures really wide tables can scroll sideways instead of breaking layout */
        overflow-x: auto !important; 
    }
    
    /* Board Member Stack Fix */
    .WaGadgetFeaturedMember .layoutHorizontal li {
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 15px !important;
    }
    
    .WaGadgetFeaturedMember .img {
        margin-bottom: 5px !important;
    }
}

/* ===========================
   FEATURED MEMBER (BOARD) CLEANUP - V2
   =========================== */

/* 1. Reset the Gadget Container */
.WaGadgetFeaturedMember {
    height: 100%;
}

/* 2. Style the Header */
.WaGadgetFeaturedMember h4.gadgetTitleH4 {
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #94a3b8 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 10px;
}

/* 3. Layout the Content - SPACED OUT & NARROWER */
.WaGadgetFeaturedMember .gadgetStyleBody {
    /* This makes the list narrower and centered */
    max-width: 85% !important; 
    margin: 0 auto !important; 
}

.WaGadgetFeaturedMember .layoutHorizontal li {
    display: flex !important;
    align-items: center;
    gap: 30px; /* Increased gap between Photo and Name */
    width: 100% !important;
    
    /* Adds vertical spacing between members */
    margin-bottom: 25px !important; 
    padding-bottom: 25px !important;
    border-bottom: 1px solid #f8fafc; /* Subtle separator line */
    list-style: none !important;
}

/* Remove spacing from the very last person so they fit the card */
.WaGadgetFeaturedMember .layoutHorizontal li:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 4. Fix the Image */
.WaGadgetFeaturedMember .img {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 !important;
}

.WaGadgetFeaturedMember .img img {
    width: 90px !important;  /* Slightly larger for better visibility */
    height: 90px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f1f5f9;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Adds a tiny pop to the photo */
}

/* 5. Fix the Name and Titles */
.WaGadgetFeaturedMember .rightPart {
    text-align: left !important;
    float: none !important;
    width: auto !important;
    padding: 0 !important;
}

.WaGadgetFeaturedMember .label_1 a {
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #0b62a3 !important;
    text-decoration: none !important;
}

.WaGadgetFeaturedMember .subtitle {
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 14px !important;
    color: #111 !important;
    font-weight: 600 !important;
    margin-top: 4px;
}

.WaGadgetFeaturedMember .description {
    font-family: Inter, system-ui, sans-serif !important;
    font-size: 13px !important;
    color: #64748b !important;
    margin-top: 4px; /* Added breathing room */
}
/* ===========================
   TIGHTEN MENU SPACING
   =========================== */

/* 1. Reduce space between standard menu links */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a {
    padding-left: 8px !important;  /* Was likely 15px+ */
    padding-right: 8px !important; /* Was likely 15px+ */
    font-size: 13px !important;    /* Slight reduction if needed (optional) */
}

/* 2. Reduce the gap before the Member Access button */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:last-child > .item > a {
    margin-left: 10px !important; /* Reduced from 20px */
}

/* ===========================
   LEFT ALIGN MENU ITEMS
   =========================== */
.WaGadgetMenuHorizontal .menuInner {
    text-align: left !important;
    justify-content: flex-start !important;
}

/* Push the Blue Button to the far Right */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel {
    width: 100% !important;
    display: flex !important;
}

.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:last-child {
    margin-left: auto !important; /* This is the magic rule that pushes the button right */
    padding-right: 0 !important;
}
/* ===========================
   MENU BUTTON STYLE
   =========================== */

/* 1. Turn the last menu item into a blue button */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:last-child > .item > a {
    background-color: #0b62a3 !important; /* Brand Blue */
    color: #ffffff !important;            /* White Text */
    border: 1px solid #0b62a3 !important;
    padding: 10px 20px !important;        /* Button Size */
    border-radius: 6px !important;        /* Rounded Corners */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    margin-left: 20px !important;         /* Pushes it away from other links */
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 2. Hover Effect (Darker Blue) */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:last-child > .item > a:hover {
    background-color: #084d82 !important;
    border-color: #084d82 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* 3. Vertically Center it */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:last-child {
    display: flex !important;
    align-items: center !important;
}

/* ===========================
   FORCE FIT CENTERED MENU
   =========================== */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li > .item > a {
    padding-left: 5px !important;  /* Very tight padding */
    padding-right: 5px !important;
    font-size: 12px !important;    /* Smaller font to make room */
    letter-spacing: -0.2px !important; /* Squeeze letters slightly */
}

/* Ensure Button still has room */
.WaGadgetMenuHorizontal .menuInner ul.firstLevel > li:last-child > .item > a {
    margin-left: 5px !important;
    font-size: 12px !important;
    padding: 8px 12px !important; /* Slightly smaller button */
}