Template:OSM Meetup/styles.css

.meetup-container {
    padding: 2%;
    width: 95%;
    margin: auto;
    border: 2px solid #e0e5e4;
    border-radius: 5px;
    box-shadow: 0 0 0.25em #829595;
    background-color: #f9f9f9;
}

/* --- NEW HEADER LAYOUT --- */
.header-main {
    position: relative; /* Enable absolute positioning for background elements */
    display: flex; /* Enable Flexbox for side-by-side layout */
    align-items: center; /* Vertically align logo and text */
    gap: 20px; /* Spacing between logo and title */
    padding: 20px;
    padding-bottom: 15px; /* Spacing below the header section */
    margin-bottom: 10px;
    border-bottom: 1px solid #e0e5e4; /* Subtle divider */
    overflow: hidden; /* Contain background elements */
    min-height:200px;
}

/* Logo container (left side) */
.logo-container {
    flex-shrink: 0; /* Ensure logo maintains its size */
    max-width: 100px; /* Ensure image size is controlled */
    z-index: 1; /* Place above background */
    position: relative;
}

.logo-container img {
    max-width: 100%;
    height: auto;
    display: block; /* Helps with alignment */
}

/* --- Custom CSS Background Drawing Styles --- */

/* Wrapper for Background Shapes */
.header-background-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Place behind the actual header content */
    /* pointer-events: none;  Allows user interaction with content above */
}

/* Base style for all background shapes */
.header-background-elements > div {
    position: absolute;
    opacity: 0.25; /* Makes them subtle background accents */
}

/* --- BUSH STYLING --- */

.bush {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    /* The magic: use a large, spread-out box-shadow to create the fuzzy, irregular edge */
    box-shadow: 0 0 100px 80px rgba(76, 175, 80, 0.9), /* Main color */
                0 0 80px 70px rgba(56, 142, 60, 0.7) inset; /* Darker inset for depth */
    background-color: rgba(76, 175, 80, 0.5); /* Central color */
    filter: blur(2px); /* Slight blur for softness */
    opacity: 0.9;
}

.bush.small {
    width: 60px;
    height: 60px;
    box-shadow: 0 0 40px 30px rgba(76, 175, 80, 0.9),
                0 0 30px 25px rgba(56, 142, 60, 0.7) inset;
}

/* Positioning the Bushes */
.bush-1 { top: 10%; left: 15%; }
.bush-2 { top: 5%; right: 15%; }
.bush-3 { top: 30%; right: 40%; }
.bush-4 { bottom: 10%; right: 10%; }
.bush-5 { bottom: 15%; left: 10%; }

/* --- BOAT STYLING --- */

.boat {
    position: absolute;
    width: 17px;
    height: 87px;
    border-radius: 50% / 10% 10% 90% 90%; /* Creates the kayak/canoe shape */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

/* Orange Boat */
.boat-orange {
    background: linear-gradient(to right, #ff9800, #ffb300);
    top: 40%;
    left: 20%;
    transform: rotate(-15deg);
}

/* Blue Boat */
.boat-blue {
    background: linear-gradient(to right, #2196F3, #1976D2);
    top: 15%;
    right: 35%;
    transform: rotate(15deg);
}

/* ::before for a subtle highlight line down the center of the boat */
.boat::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 48%;
    width: 4%;
    height: 90%;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
}

/* ::after for the small stick/oar */
.boat::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 60px;
    background: black;
    transform-origin: center;
    /* Adjust rotation based on boat */
}

.boat-orange::after {
    transform: translate(-50%, -50%) rotate(75deg);
}

.boat-blue::after {
    transform: translate(-50%, -50%) rotate(-75deg);
}
/* --- END Custom CSS Background Drawing Styles --- */

/* Title and Subtitle container (right side) */
.title-container {
    flex-grow: 1; /* Allows the title section to take up available space */
    text-align: center; /* Center align the text within this block */
    line-height: 1.1;
    z-index: 1; /* Place above background */
    position: relative;
}

/* Styling for the main title: BIG and BOLD */
.main-title {
    font-size: 240%;
    font-weight: 800; /* Extra bold */
    margin: 0;
    color: #cd3013;
    text-shadow: 0 1px 1px rgba(0,0,0,0.05);
}

/* Styling for the subtitle */
.subtitle {
    font-size: 120%;
    font-weight: 400;
    margin: 5px 0 0 0;
    color: #555;
}
/* --- END NEW HEADER LAYOUT --- */

.links-container {
    margin: 10px 0;
    background-color: #FFFFFF;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.links-flex-container {
    display: flex;
    justify-content: center;
    padding: 10px;
}

.link-item {
    background-color: #F0F0F9;
    border-top: 5px solid #333399;
    padding: 10px;
    flex: 1 1 auto;
    margin: 5px;
    text-align: center;
    border-radius: 4px;
    transition: transform 0.2s;
}

.link-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Original colors kept for links */
.link-item:nth-child(1) {
    background-color: #F9F9F0;
    border-color: #999933;
}

.link-item:nth-child(2) {
    background-color: #F0F9F0;
    border-color: #339933;
}

.link-item:nth-child(3) {
    background-color: #f2f0f9;
    border-color: #343399;
}

.link-item:nth-child(4) {
    border-color: #333399;
}

.link-item:nth-child(5) {
    border-color: #333399;
}

.link-item:nth-child(6) {
    border-color: #336699;
}

.link-item:nth-child(7) {
    border-color: #333399;
}

.link-item:nth-child(8) {
    border-color: #333399;
}

.link-item a {
    color: #000;
    text-decoration: none;
    font-weight: 600;
    display: block;
}