/* E-FORESTER website v2 (October 2026) */
:root {
    --primary-color: #2E7D32;   /* forest green */
    --primary-dark: #1B5E20;
    --secondary-color: #4E342E; /* earth brown */
    --accent-color: #003399;    /* EU blue */
    --bg-light: #F5F5F5;
    --text-dark: #333333;
    --text-muted: #5f6368;
    --text-light: #FFFFFF;
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { font-family: var(--font-main); color: var(--text-dark); line-height: 1.6; background-color: var(--text-light); }
h1, h2, h3, h4 { font-weight: 600; }
a { color: var(--primary-color); }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; height: auto; }

/* Navigation */
.site-nav {
    position: fixed; top: 0; width: 100%; z-index: 1000;
    background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.8rem 4%;
}
.site-nav .logo { font-size: 1.5rem; font-weight: bold; color: var(--primary-color); text-decoration: none; }
.site-nav ul { list-style: none; display: flex; align-items: center; }
.site-nav ul li { margin-left: 1.3rem; }
.site-nav ul li a { font-weight: 500; color: var(--text-dark); text-decoration: none; transition: color 0.3s; }
.site-nav ul li a:hover { color: var(--primary-color); }
.eu-nav-logo { height: 48px; width: auto; margin-left: 1.5rem; }
.menu-toggle { display: none; font-size: 1.6rem; background: none; border: 0; cursor: pointer; color: var(--text-dark); }

/* Hero */
.hero {
    position: relative; height: 100vh; min-height: 520px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--text-light); overflow: hidden; isolation: isolate;
    padding: 0 5%;
}
.hero video {
    position: absolute; top: 50%; left: 50%; width: 115%; height: 115%; z-index: -2;
    transform: translate(-55%, -50%); object-fit: contain; background-color: #000;
}
.hero-overlay { position: absolute; inset: 0; background: rgba(0, 51, 153, 0.4); z-index: -1; }
.hero-content { max-width: 800px; padding: 2rem; }
.hero h1 { font-size: 3rem; text-shadow: 2px 2px 5px rgba(0,0,0,0.5); margin-bottom: 0.5rem; }
.hero-sub { font-size: 1.5rem; margin-bottom: 1.5rem; text-shadow: 1px 1px 4px rgba(0,0,0,0.5); }
.hero-lead { font-size: 1.2rem; margin-bottom: 2rem; text-shadow: 1px 1px 4px rgba(0,0,0,0.5); }

.btn {
    display: inline-block; padding: 10px 25px; background: var(--primary-color);
    color: var(--text-light); border-radius: 5px; font-weight: bold; text-decoration: none; transition: background 0.3s;
}
.btn:hover { background: var(--primary-dark); color: var(--text-light); }

/* Sections */
section { padding: 5rem 10%; }
main > section:nth-of-type(even) { background: var(--bg-light); }
.section-title { text-align: center; font-size: 2.2rem; color: var(--primary-color); margin-bottom: 2.5rem; }
.sub-title { font-size: 1.3rem; color: var(--secondary-color); margin: 2.5rem 0 1rem; }
.intro { text-align: center; max-width: 820px; margin: 0 auto 2.5rem; }
.note { color: var(--text-muted); font-size: 0.95rem; margin-top: 1rem; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.text-content p { margin-bottom: 1rem; text-align: justify; }
.feature-img { width: 100%; height: 400px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

/* Key facts */
main > section.facts {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem;
    padding: 2.5rem 10%; background: var(--primary-color); color: var(--text-light); text-align: center;
}
.fact-num { display: block; font-size: 2.4rem; font-weight: 700; line-height: 1.1; }
.fact-label { display: block; font-size: 0.9rem; opacity: 0.95; }

.facts-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.95rem; }
.facts-table th, .facts-table td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid #ddd; vertical-align: top; }
.facts-table th { width: 34%; color: var(--secondary-color); }

/* Chips */
.chip {
    display: inline-block; font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border-radius: 12px;
    background: #e0e0e0; color: #333; margin-left: 0.4rem; white-space: nowrap;
}

/* Work packages */
.wp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.wp { background: #fff; border-radius: 8px; padding: 1.1rem 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-top: 4px solid #bdbdbd; }
.wp h3 { font-size: 1rem; margin: 0.3rem 0; }
.wp p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.wp .chip { margin-left: 0; }
.wp-id { font-weight: 700; color: var(--secondary-color); font-size: 0.85rem; }
.wp.done { border-top-color: var(--primary-color); }
.wp.done .chip { background: #c8e6c9; color: #1b5e20; }
.wp.now { border-top-color: var(--accent-color); }
.wp.now .chip { background: #dbe4ff; color: #0b2a8a; }
.wp.next .chip { background: #eeeeee; color: #555; }

#progress .sub-title { max-width: 820px; margin-left: auto; margin-right: auto; }
.milestones { max-width: 820px; margin: 0 auto; padding-left: 1.4rem; }
.milestones li { margin-bottom: 0.5rem; }
.milestones li.ms-done .chip { background: #c8e6c9; color: #1b5e20; }

.collocations { list-style: none; }
.collocations li { background: #fff; border-left: 4px solid var(--primary-color); padding: 0.8rem 1rem; margin-bottom: 0.7rem; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.collocations strong { display: block; color: var(--secondary-color); }

/* Timeline */
.timeline { list-style: none; max-width: 980px; margin: 0 auto; }
.timeline li { display: grid; grid-template-columns: 150px 1fr; gap: 1.5rem; padding: 1rem 0; border-bottom: 1px solid #e0e0e0; }
.timeline .date { font-weight: 700; color: var(--primary-color); }
.timeline h4 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.timeline p { text-align: justify; }
.timeline.upcoming .date { color: var(--accent-color); }
.events-wrap .sub-title, #events .sub-title { max-width: 980px; margin-left: auto; margin-right: auto; }

.media-list, .pub-list { list-style: none; max-width: 980px; margin: 0 auto; }
.media-list li { padding: 0.5rem 0; border-bottom: 1px solid #e0e0e0; }
.pub-list li { background: #fff; padding: 1.2rem 1.4rem; border-radius: 8px; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.pub-title { font-weight: 600; margin-bottom: 0.3rem; }
#publications .note { text-align: center; }

/* Consortium */
.partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 980px; margin: 0 auto; }
.partner { background: #fff; border-radius: 8px; padding: 1.5rem 1rem; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.partner img { max-height: 70px; width: auto; max-width: 170px; object-fit: contain; margin-bottom: 0.8rem; }
.partner h3 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.partner p { font-size: 0.85rem; color: var(--text-muted); }

/* Contact */
.contact-box { max-width: 700px; margin: 0 auto; text-align: center; }
.contact-box p { margin-bottom: 1rem; }

/* Contact form */
.subpage main { padding-top: 70px; }
.contact-page { min-height: 70vh; }
.contact-form { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; }
.contact-form label { font-weight: 600; margin: 0.9rem 0 0.3rem; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form select, .contact-form textarea {
    font: inherit; padding: 0.6rem 0.7rem; border: 1px solid #bdbdbd; border-radius: 5px; background: #fff; width: 100%;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--primary-color); border-color: var(--primary-color); }
.contact-form .consent { font-weight: 400; display: flex; gap: 0.6rem; align-items: flex-start; margin: 1.2rem 0; }
.contact-form .consent input { margin-top: 0.35rem; }
.contact-form button.btn { border: 0; cursor: pointer; align-self: flex-start; font-size: 1rem; }
.req { color: #b71c1c; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-msg { max-width: 640px; margin: 0 auto 1.5rem; padding: 1rem 1.2rem; border-radius: 6px; }
.form-msg.ok { background: #e8f5e9; border-left: 4px solid var(--primary-color); text-align: center; }
.form-msg.ok p { margin-bottom: 0.8rem; }
.form-msg.err { background: #fdecea; border-left: 4px solid #b71c1c; }
.form-msg.err ul { padding-left: 1.2rem; }

/* Footer and EU funding */
footer { background: var(--secondary-color); color: var(--text-light); padding: 3rem 10%; }
.footer-compliance { display: flex; align-items: center; gap: 2rem; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,0.2); }
.footer-compliance img { height: 80px; width: auto; background: #fff; padding: 6px; border-radius: 4px; flex-shrink: 0; }
.footer-compliance-text p { font-size: 0.9rem; margin-bottom: 0.5rem; }
.copyright { text-align: center; font-size: 0.8rem; color: #d7ccc8; }
.copyright p { margin-bottom: 0.3rem; }

/* Responsive */
@media (max-width: 1100px) {
    .site-nav ul li { margin-left: 0.9rem; }
    .site-nav ul li a { font-size: 0.92rem; }
}
@media (max-width: 900px) {
    .site-nav ul {
        display: none; flex-direction: column; position: absolute; top: 64px; left: 0; width: 100%;
        background: #fff; box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }
    .site-nav ul.active { display: flex; }
    .site-nav ul li { margin: 0; padding: 0.9rem; text-align: center; border-bottom: 1px solid #eee; width: 100%; }
    .menu-toggle { display: block; order: 3; }
    .site-nav .logo { order: 1; }
    .eu-nav-logo { height: 36px; margin-left: auto; margin-right: 1rem; order: 2; }
    .two-col { grid-template-columns: 1fr; }
    main > section.facts { grid-template-columns: repeat(2, 1fr); }
    .partner-grid { grid-template-columns: repeat(2, 1fr); }
    .text-content p, .timeline p { text-align: left; }
    .hero h1 { font-size: 2rem; }
    .hero-sub { font-size: 1.1rem; }
    section { padding: 4rem 6%; }
    .timeline li { grid-template-columns: 1fr; gap: 0.3rem; }
    .footer-compliance { flex-direction: column; text-align: center; }
}
@media (max-width: 520px) {
    .partner-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}