/* Styles specific to cmm.html (marketplace) */

/* Core reset & base styles so cmm.html works standalone (no style.css) */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Poppins', sans-serif;
}

html{scroll-behavior:smooth}

body{
    background: #ffffff; /* keep the marketplace light */
    color: #025628;
}

/* container is reused across the page */
.container{ padding: 24px 8%; }

/* Basic nav/header helpers */
nav{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.logo{width:auto;overflow:visible}
nav ul{display:flex;gap:12px;align-items:flex-start;list-style:none;margin:0;padding:0}
nav ul li{margin:0}
nav ul li a, nav ul li button.btn-login{color:#025628;text-decoration:none;font-size:16px;padding:8px 12px;border-radius:8px;font-weight:700;background:transparent;border:0}

.header-text{margin-top:20%;font-size:28px;color:#6b6b6b}
.header-text h1{font-size:48px;margin-top:30 px;color:#6b6b6b}

/* utility/button styles used in the page */
.btn{display:inline-block;padding:10px 14px;border-radius:8px;border:1px solid #8dc63f;background:#8dc63f;color:#fff;cursor:pointer;font-weight:700}
.btn2{display:inline-block;background:#ffffff;border:1px solid #e6efe0;color:#025628;padding:10px 14px;border-radius:8px;cursor:pointer}
.btn2:hover{background:#f4f9f2}

.sub-title{font-size:32px;font-weight:600;color:#025628}

.copyright{width:100%;text-align:center;padding:10px 0;background:#f2f6f2;font-size:small;color:#6b6b6b;margin-top:30px}


/* Header for CMM page: use a light/white header for the marketplace variant */
#header{
    position:relative;
    height: 60vh;
    background-image: none !important;
    background: #ffffff; /* white header background as requested */
    color: #025628; /* dark green text on white background */
    border-bottom: 1px solid #eef3ea;
}

/* Animated decorative bubbles behind the header title */
.header-bubbles{position:absolute;left:0;right:0;top:0;height:60vh;pointer-events:none;overflow:hidden;z-index:0}
.header-bubbles .bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(141,198,63,0.98), rgba(45,148,69,0.92));opacity:0.22;filter:blur(10px);transform-origin:center;will-change:transform}
.header-bubbles .b1{width:220px;height:220px;left:8%;top:18%}
.header-bubbles .b2{width:140px;height:140px;left:28%;top:6%}
.header-bubbles .b3{width:320px;height:320px;left:50%;top:12%}
.header-bubbles .b4{width:100px;height:100px;left:63%;top:30%}
.header-bubbles .b5{width:180px;height:180px;left:36%;top:34%}

/* animations only enabled when header has .animate-bubbles */
#header.animate-bubbles .b1{animation:floatA 18s ease-in-out infinite alternate;-webkit-animation:floatA 18s ease-in-out infinite alternate}
#header.animate-bubbles .b2{animation:floatB 20s ease-in-out infinite alternate;-webkit-animation:floatB 20s ease-in-out infinite alternate}
#header.animate-bubbles .b3{animation:floatC 22s ease-in-out infinite alternate;-webkit-animation:floatC 22s ease-in-out infinite alternate}
#header.animate-bubbles .b4{animation:floatA 16s ease-in-out infinite alternate;-webkit-animation:floatA 16s ease-in-out infinite alternate}
#header.animate-bubbles .b5{animation:floatB 24s ease-in-out infinite alternate;-webkit-animation:floatB 24s ease-in-out infinite alternate}

@keyframes floatA{0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}100%{transform:translate3d(140px,-120px,0) scale(1.08) rotate(8deg)}}
@keyframes floatB{0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}100%{transform:translate3d(-160px,-80px,0) scale(1.06) rotate(-6deg)}}
@keyframes floatC{0%{transform:translate3d(0,0,0) scale(1) rotate(0deg)}100%{transform:translate3d(84px,-160px,0) scale(1.09) rotate(10deg)}}

@-webkit-keyframes floatA{0%{-webkit-transform:translate3d(0,0,0) scale(1) rotate(0deg)}100%{-webkit-transform:translate3d(140px,-120px,0) scale(1.08) rotate(8deg)}}
@-webkit-keyframes floatB{0%{-webkit-transform:translate3d(0,0,0) scale(1) rotate(0deg)}100%{-webkit-transform:translate3d(-160px,-80px,0) scale(1.06) rotate(-6deg)}}
@-webkit-keyframes floatC{0%{-webkit-transform:translate3d(0,0,0) scale(1) rotate(0deg)}100%{-webkit-transform:translate3d(84px,-160px,0) scale(1.09) rotate(10deg)}}

@media (prefers-reduced-motion: reduce){
    .header-bubbles .bubble{animation:none;opacity:0.12;filter:blur(8px)}
}

/* make sure header content sits above bubbles */
#header .container{position:relative;z-index:3}

/* Ensure logo sits above decorative bubbles and has a clean white backdrop */
.site-logo{position:absolute;z-index:60;right:24px;top:18px;display:inline-block;background:#ffffff;border-radius:8px;padding:6px}
.site-logo img{height:120px;display:block;margin:0}

/* Nudge header action buttons up slightly so they sit closer to the top */
/* ensure login buttons align at the top-right without manual offsets */
nav ul li button.btn-login{position:relative;top:0}
nav ul li a, nav ul li button.btn-login{color:#025628}

/* Make the 'Marketplace' word dark green inside the header title */
#header .header-text h1 span{color:#025628}

.dashboard-mini{
    background:#dce7c9;padding:8px 12px;border-radius:8px;font-size:14px;color:#025628;border:1px solid #c8e0b3;
}

/* Login button in header nav */
.btn-login{
    background:transparent;border:1px solid rgba(255,255,255,0.12);color:#ffffff;padding:8px 12px;border-radius:8px;cursor:pointer;font-weight:700;
}
.btn-login:hover,.btn-login:focus{background:rgba(255,255,255,0.06);transform:none}

/* Login modal tweaks (reuse .modal/.modal-content) */
.modal-content input[type="email"], .modal-content input[type="password"]{padding:10px 12px;font-size:15px}
.modal-content label{display:block}
.modal-content #loginError{color:#b83b3b}

/* Header nav links & login button use same dark green color on light backgrounds */
nav ul li a, nav ul li button.btn-login{
    color: #025628; /* darkest site color */
    background: transparent;
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight:700;
    font-size:16px;
}
nav ul li a:hover, nav ul li button.btn-login:hover, nav ul li a:focus, nav ul li button.btn-login:focus{
    background: rgba(5,70,34,0.06);
    outline: none;
}

/* Slightly space out the nav list for touch */
nav ul{display:flex;gap:12px;align-items:center;list-style:none;margin:0;padding:0}
nav ul li{margin:0}

/* When nav sits inside the dark header, use white links for contrast */
#header nav ul li a, #header nav ul li button.btn-login{
    /* inside dark header we show a subtle light pill behind dark-green text for contrast */
    color: #025628 !important;
    background: rgba(220,231,201,0.95); /* light dce7c9 tint */
    padding: 8px 12px;
    border-radius: 10px;
}
#header nav ul li a:hover, #header nav ul li button.btn-login:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(2,86,40,0.08);
    background: rgba(141,198,63,0.12); /* gentle green highlight */
}

/* site-logo spacing */
.site-logo img{height:144px;display:block;margin-bottom:16px}

/* Reduce header height on very small screens so large logo doesn't overflow */
@media only screen and (max-width:480px){
    #header{height:auto;padding-bottom:12px}
    /* move logo into the flow on small screens so it doesn't overlap content */
    .site-logo{position:relative;right:auto;top:auto;margin:12px 0 10px 0}
    .site-logo img{height:96px;margin-bottom:10px}
}

@media only screen and (max-width:800px){
    .header-text{margin-top:6%;}
    .header-text h1{font-size:36px}
}

.tiles{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}
/* Filters: slightly larger, more touch-friendly controls */
.filters{gap:18px;align-items:center}
.filters select, .filters input{
    padding:10px 14px;
    font-size:16px;
    border-radius:8px;
    border:1px solid #dce7c9;
    background:#ffffff;
    color:#025628;
    min-height:44px;
}
.filters select{appearance:none;padding-right:32px}
.tile{
    background:#ffffff;padding:18px;border-radius:12px;border:1px solid #e6efe0;box-shadow:0 6px 18px rgba(2,86,40,0.06);
}
.tile .thumb{height:160px;background:#f5f7f4;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.tile .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .placeholder{color:#9aa98a;font-weight:600;font-size:18px;letter-spacing:1px}
.tile h3{font-size:18px;margin-top:10px}
.meta{color:#6b6b6b;font-size:13px;margin-top:6px}
.tile .actions{display:flex;gap:8px;margin-top:12px}
.btn-small{padding:8px 12px;border-radius:6px;border:1px solid #8dc63f;background:transparent;color:#025628;cursor:pointer}
.btn-small.claimed{background:#f0f3ec;border-color:#e0e9d6;color:#6b6b6b}
/* Hover/focus/active states for buttons */
.btn-small:hover, .btn-small:focus,
.btn:focus, .btn:hover, .btn2:hover, .btn2:focus, .btn-post:hover, .btn-post:focus{
    transform: translateY(-3px);
    transition: transform 150ms ease, box-shadow 150ms ease;
    box-shadow: 0 10px 30px rgba(2,86,40,0.08);
}
.btn-small:active, .btn:active, .btn2:active, .btn-post:active{
    transform: translateY(0);
    box-shadow: none;
}

/* Small tooltip when data-hint is present */
[data-hint]{position:relative}
[data-hint]::after{
    content: attr(data-hint);
    position:absolute;
    bottom:calc(100% + 8px);
    left:50%;
    transform:translateX(-50%) scale(0.95);
    background:#025628;
    color:#fff;
    padding:6px 8px;border-radius:6px;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 120ms ease, transform 120ms ease;
}
[data-hint]:hover::after,[data-hint]:focus::after{opacity:1;transform:translateX(-50%) scale(1)}

/* Modal */
.modal{position:fixed;left:0;top:0;width:100%;height:100%;display:none;align-items:center;justify-content:center;background:rgba(2,86,40,0.08);z-index:50}
.modal[aria-hidden="false"]{display:flex}
.modal-content{background:#ffffff;padding:22px;border-radius:12px;width:520px;max-width:94%;border:1px solid #e6efe0;color:#025628}
.modal-content h3{margin-bottom:12px}
.modal-content input,.modal-content textarea, .modal-content select{width:100%;padding:10px;background:#ffffff;border-radius:8px;border:1px solid #dce7c9;color:#025628;margin-top:8px}

/* Executive summary paragraph: constrain width and ensure left-aligned text */
#exec p{
    max-width:1265px;
    margin:0 auto;
    color:#6b6b6b; /* keep a muted tone consistent with header */
    text-align:left;
    line-height:1.6;
}

/* small responsive tweaks */
@media only screen and (max-width:800px){
    .tiles{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
}