.header-logoImage img {
    width: 1120px;
}
.page-home h1.content-name {
    display: none;
}
.section_header {
    width: 100%;
    display: block;
}
.section_header .pull-right {
    width: 100%;
    float: none;
    text-align: center;
}
.section_header .pull-right .icon {
    width: auto;
}
.section_header .module-header {
   padding: 4px 5px;
    margin: -5px -5px 5px -5px;
-webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
}
.module-header {
-webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
}
.membersSection-avatars {
    margin: 0;
    justify-content: center!important;
}
/*Change slideshow  background*/
.photoSlideshow {
background-color: transparent;
}
/*Change color of prew next buttons*/
.slick-prev:before, .slick-next:before {
opacity: 1;
color: black;
}
h1, h2, h3, h4, h5, h6, p {
    margin-bottom: 0;
    padding: 0;
}


a#header-siteName:after {
    content: "Hiking Inn to Inn";
    display: flex;
    color: /* %pageHeaderTextColor% */ #363636;
    font-family: /* %textFont% */ Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
    font-size: 22px;
    font-weight: normal;
    padding-left: 10px;
}

p.header-siteNameLogo {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    margin-left: -10vw;
}

/* 
 * Walkabout California - Immediate Visual Fixes
 * Paste these rules into Ning Design Studio -> Custom CSS to apply the requested changes.
 */

/* ==========================================================================
   1. ALIGN BANNER EDGES WITH THE MAIN TEXT COLUMN
   ========================================================================== */
/* Constrains the header wrapper to the same 1120px width as the body container, centers it, and rounds the edges */
.site-headerFrame {
    max-width: 1120px !important;
    margin: 0 auto !important;
    background: #ffffff !important; /* Clean background matching the layout */
    border: 1px solid #E2E8F0 !important; /* Unified border around the header */
    border-radius: 12px !important;       /* Rounds the header corners to match the boxes below */
    overflow: hidden !important;          /* Clips any leaking navbar backgrounds or side lines */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.site-header.container {
    width: 100% !important;
    max-width: 1120px !important;
    padding: 0 !important;
    margin: 0 auto !important;
}


/* ==========================================================================
   2. ROUNDED EDGES FOR THE SHEETS (YELLOW MODULE BOXES)
   ========================================================================== */
/* Rounds the corners of the main content boxes/sheets */
.sheet, 
.grid-frame.sheet, 
.section-html {
    border-radius: 12px !important;
    overflow: hidden !important; /* Ensures the yellow header inside doesn't bleed out of the rounded corners */
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}

/* Rounds the top corners of the module headers (the yellow boxes) */
.module-header, 
.section_header .module-header {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Fixes the section headers width and margins to prevent gaps on the sides of the yellow box */
.section_header {
    width: 101% !important;
    margin-left: -0.5% !important; /* Centers the slightly wider box */
}


/* ==========================================================================
   3. INLINE LEFT-ALIGNED LOGO & SMALLER HEADER BANNER
   ========================================================================== */
/* Hide the old, small background-image logo and collapse extra height for centering */
.site-header {
    background-image: none !important; 
    min-height: auto !important; /* Removes default height limits to ensure vertical padding is perfectly equal */
}

/* Left-aligned wrapper for the logo/site title area with generous spacings */
.site-nameLogo {
    display: flex !important;
    justify-content: flex-start !important; /* Aligns content to the left */
    align-items: center !important;         /* Centers vertically */
    width: 100% !important;
    padding: 20px 20px 20px 50px !important; /* 50px padding on the left, 20px on top and bottom for breathing room */
}

/* Stacks logo on the left and text on the right using row-reverse */
p.header-siteNameLogo {
    display: flex !important;
    flex-direction: row-reverse !important; /* Places logo (second element) on the left of the text */
    justify-content: flex-end !important;   /* Aligns them to the left edge */
    align-items: center !important;         /* Centers vertically */
    margin: 0 !important; 
    padding: 10px 0 !important;             /* Overrides Ning's default 40px top / 10px bottom padding to be exactly 10px on both sides */
    width: 100% !important;
}

/* Style for the site title link (text-based name) */
.header-siteName {
    font-size: 38px !important; /* Larger text size to balance with the large logo */
    font-weight: 700 !important;
    text-align: left !important;
    display: block !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Style for the subtitle (e.g. "Hiking Inn to Inn") */
a#header-siteName:after {
    display: block !important;
    text-align: left !important;
    justify-content: flex-start !important; 
    padding-left: 0 !important;
    margin-top: 4px !important;
    font-size: 16px !important;
}

/* Style the actual Logo Image container */
.header-logoImage {
    display: flex !important; /* Force display so the uploaded logo shows */
    justify-content: center !important;
    align-items: center !important;
    margin: 0 50px 0 0 !important; /* Generous 50px spacing between logo and text */
}

/* Style the inline logo image itself for a large, crisp left-aligned look */
.header-logoImage img, 
.header-logoIMG {
    display: block !important;
    width: auto !important;
    height: 140px !important;    /* Made significantly larger (140px height) */
    max-height: none !important;  /* Overrides Ning's default max-height: 12vw constraint */
    
    /* High-DPI crisp image scaling rules */
    image-rendering: -webkit-optimize-contrast !important; /* Safari/Chrome crisp image rendering */
    image-rendering: crisp-edges !important;               /* Standard crisp image rendering */
    image-rendering: pixelated !important;
}

/* Responsive adjustment for mobile screens (width <= 768px) */
@media (max-width: 768px) {
    /* Center the header content wrapper and set compact vertical padding */
    .site-nameLogo {
        justify-content: center !important;
        padding: 8px 15px !important; /* Reduced vertical padding to 8px to compact the header height */
    }
    
    /* Stack the logo and text title vertically, centered */
    p.header-siteNameLogo {
        flex-direction: column-reverse !important; /* Stack vertically: logo above text */
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important; /* Tighter gap between logo and text */
    }
    
    /* Center the title text and make it smaller */
    .header-siteName {
        font-size: 24px !important; /* Smaller size for mobile screens */
        text-align: center !important;
    }
    
    /* Center the subtitle */
    a#header-siteName:after {
        text-align: center !important;
        justify-content: center !important;
        font-size: 14px !important;
    }
    
    /* Center the logo container and reset spacing */
    .header-logoImage {
        margin: 0 0 5px 0 !important; /* Tighter spacing below the logo */
        justify-content: center !important;
    }
    
    /* Scale the logo to a reasonable, crisp size for mobile */
    .header-logoImage img, 
    .header-logoIMG {
        height: 95px !important;     /* Reduced from 120px to 95px to keep the overall header height compact */
        max-height: none !important; /* Overrides Ning's default max-height: 12vw constraint */
        width: auto !important;
    }
}


/* ==========================================================================
   4. ALIGN NAVBAR TEXT WITH SITE-BODY (REMOVE OUTER PADDING)
   ========================================================================== */
/* Reset any wrapper-level paddings, margins, borders, or shadows on the navigation bar containers */
.header-nav,
.header-nav.navbar,
.navbar,
.mainTab {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border: none !important;      /* Removes any vertical yellow lines on the sides */
    outline: none !important;
    box-shadow: none !important;  /* Removes any shadows that might create line illusions */
}

/* Explicitly add 5px padding-left to the header-nav container as requested (boosted specificity to resolve cascade conflict) */
.site-header .header-nav.navbar,
.site-header .header-nav,
.header-nav.navbar,
.header-nav {
    padding-left: 5px !important;
}

/* Removes left padding of the first menu item link to align text with container edge */
.site-header .mainTab-item:first-child a,
.site-header .mainTab-item:first-child span,
.mainTab-item:first-child a,
.mainTab-item:first-child span {
    padding-left: 0 !important;
}

/* Removes right padding of the last menu item link to align text with container edge */
.site-header .mainTab-item:last-child a,
.site-header .mainTab-item:last-child span,
.mainTab-item:last-child a,
.mainTab-item:last-child span {
    padding-right: 0 !important;
}

/* Removes padding from the site body to ensure the content columns align perfectly with the header/navbar boundaries */
.site-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
}