Template:OSM Meetup/styles.css

.meetup-container {
    padding: 2%;
    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 */
}

/* 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.55; /* Makes them subtle background accents */
}

/* Bush 1 (Large, Top Left) - Organic bush shape */
.bg-bush-1 {
    width: 120px;
    height: 120px;
    background: radial-gradient(circle at 30% 30%, #7CB342, #558B2F);
    border-radius: 50% 45% 48% 52%;
    top: -40px;
    left: 10%;
    filter:blur(3px);
    box-shadow: 
        inset -10px -10px 20px rgba(0,0,0,0.1),
        inset 10px 10px 20px rgba(255,255,255,0.1);
}

/* Add texture to bush 1 with pseudo-elements */
.bg-bush-1::before,
.bg-bush-1::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #7CB342, #558B2F);
}

.bg-bush-1::before {
    width: 40px;
    height: 40px;
    top: 10px;
    left: -15px;
    opacity: 0.7;
}

.bg-bush-1::after {
    width: 35px;
    height: 35px;
    bottom: 5px;
    right: -10px;
    opacity: 0.6;
}

/* Bush 2 (Medium, Top Right) */
.bg-bush-2 {
    width: 90px;
    height: 90px;
    background: radial-gradient(circle at 40% 40%, #8BC34A, #689F38);
    border-radius: 48% 52% 50% 48%;
    top: 10px;
    right: 20%;
    filter:blur(3px);
    box-shadow: 
        inset -8px -8px 15px rgba(0,0,0,0.1),
        inset 8px 8px 15px rgba(255,255,255,0.1);
}

.bg-bush-2::before,
.bg-bush-2::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #8BC34A, #689F38);
}

.bg-bush-2::before {
    width: 30px;
    height: 30px;
    top: -10px;
    right: 10px;
    opacity: 0.7;
}

.bg-bush-2::after {
    width: 25px;
    height: 25px;
    bottom: -8px;
    left: 15px;
    opacity: 0.6;
}

/* Bush 3 (Small, Bottom Center) */
.bg-bush-3 {
    width: 70px;
    height: 70px;
    background: radial-gradient(circle at 35% 35%, #9CCC65, #7CB342);
    border-radius: 52% 48% 50% 50%;
    bottom: -25px;
    left: 50%;
    filter:blur(3px);
    transform: translateX(-50%);
    box-shadow: 
        inset -6px -6px 12px rgba(0,0,0,0.1),
        inset 6px 6px 12px rgba(255,255,255,0.1);
}

.bg-bush-3::before {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: radial-gradient(circle, #9CCC65, #7CB342);
    top: 5px;
    right: -8px;
    opacity: 0.6;
}

/* --- 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: 200% !important;
    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: 110% !important;
    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;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    justify-content: center;
    padding: 5px;
    gap: 2px; /* Modern gap property for consistent spacing */
}

.link-item {
    background-color: #F0F0F9;
    border-top: 5px solid #333399;
    padding: 10px 15px;
    flex: 1 1 calc(5% - 10px); /* 4 items per row on desktop, accounting for gap */
    min-width: 80px; /* Minimum width before wrapping */
    max-width: 200px; /* Maximum width for very large screens */
    margin: 0; /* Remove margin, using gap instead */
    text-align: center;
    border-radius: 4px;
    transition: transform 0.2s;
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Tablet: 2-3 items per row */
@media (max-width: 768px) {
    .link-item {
        flex: 1 1 calc(20% - 15px); /* 2 items per row */
        min-width: 110px;
    }
}

/* Mobile: 1 item per row */
@media (max-width: 480px) {
    .links-flex-container {
        padding: 5px;
        gap: 8px;
    }
    
    .link-item {
        flex: 1 1 calc(20% - 15px); /* Full width on mobile */
        min-width: 90px;
        max-width: unset;
        padding: 10px 4px;
    }
}

.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;
    font-size:0.8rem;
}