/* ========== ROOT THEME ========== */
:root{
    --primary-color:#63513d;      /* rich cocoa */
    --secondary-color:#a67c52;    /* milk-chocolate accent */
    --text-color:#000;
    --background-color:#fff;
    --header-bg:#f0f0f0;
}

/* ========== GLOBAL ========== */
*{box-sizing:border-box;}
html{scroll-padding-top:100px;}
body{
    margin:0;
    font-family:'Poppins',sans-serif;
    background:var(--background-color);
    color:var(--text-color);
    display:flex;flex-direction:column;min-height:100vh;
    transition:opacity .5s ease;
    overflow-x:hidden; /* fix horizontal overflow */
}

/* ========== HEADER (now sticky) ========== */
header{position:sticky;top:0;z-index:1000;}
.top-bar{
    display:flex;justify-content:space-between;align-items:center;
    background:var(--header-bg);padding:0 25px;
    border-bottom:1px solid rgba(0,0,0,.15);
}
.logo a{display:inline-block}
.logo img{height:78px;width:auto;flex-shrink:0}

.menu ul{list-style:none;display:flex;margin:0;padding:0}
.menu li{margin:0 15px}
.menu a{font-weight:600;text-decoration:none;color:#000;transition:color .3s}
.menu a:hover{color:var(--secondary-color)}
.hamburger{display:none;font-size:24px;cursor:pointer}

.menu a.active{color:var(--secondary-color)}

@media(max-width:768px){
    .menu ul{display:none;flex-direction:column;position:absolute;top:60px;left:0;width:100%;background:#c1c1c1}
    .menu ul.active{display:flex}
    .menu li{margin:15px 0;text-align:center}
    .hamburger{display:block}
}

/* ========== LAYOUT HELPERS ========== */
main{width:100%;margin:0 auto;padding:0;flex:1;}
section{margin-bottom:40px;padding:20px;/* border-radius:20px; */text-align:center} /* curved corners */
.section-layout{display:flex;gap:30px;align-items:center;justify-content:space-between}
.section-layout.alt{flex-direction:row-reverse}
.section-layout .text{flex:1;text-align:left;padding: 20px;background:#f9f9f9;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.05);border:1px solid #a4a4a4}
.section-layout img{flex:1;max-width: 38%;}
@media(max-width:768px){.section-layout,.section-layout.alt{flex-direction:column}.section-layout img{max-width:100%}#history-image{max-width:80%}}

.section-layout.vertical{flex-direction:column}.section-layout .text{max-width:80%;margin:0 auto;text-align:center}

/* Alternate subtle background for every other section */
.about-page section:nth-of-type(even){background:#fff5ee}

/* ========== IMAGES ========== */
section img{width:100%;height:auto;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.1);transition:opacity .5s ease,transform .3s ease,filter .5s ease;opacity:0}
img.loaded{opacity:1;transform: scale(1);filter:blur(0)}
#vision-image{box-shadow:none}#history-image{max-width:50%}#contact-image{max-width:40%}

/* ========== BUTTONS & FORMS ========== */
input,textarea,button{width:100%;margin:10px 0;padding:15px;border-radius:20px;border:1px solid var(--primary-color)}
button{background:var(--secondary-color);color:#fff;font-size:18px;border:none;cursor:pointer;transition:opacity .25s}
button:hover{opacity:.9}

/* hero-section / dashboard action button */
.view-all-btn{
    background-color:var(--primary-color);
    color:#fff;
    padding:13px 28px;
    border:none;
    border-radius:5px;
    cursor:pointer;
    transition:background-color .3s ease;
    font-size:1rem;
    display:inline-block;
    margin:20px auto 0;
    width:max-content;
    position:relative; /* keep above overlay */
    z-index:2;
}
.view-all-btn:hover{background-color:var(--secondary-color)}

/* ========== CALL-TO-ACTION ========== */
.call-to-action{background: #ffebd5;color:#fff;text-align:center}
.call-to-action .text{background:rgba(255,255,255,.8)!important;color:var(--text-color);border-radius:8px}

/* ========== PRODUCTS GRID ========== */
.products{background:#fff5ee;padding:60px 20px}
.product-grid{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:40px}
.card{background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.08);overflow:hidden;transition:transform .25s}
.card:hover{transform:translateY(-6px)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.card h3{margin:16px 20px 0;font-weight:600}
.card p{margin:8px 20px 24px;font-size:.95rem;color:#444}

/* ========== PARTNERS PAGE ========== */
.partner-hero{position:relative;padding:120px 20px 140px;text-align:center;color:#fff;background:var(--partners-hero-bg) center/cover no-repeat}
.partner-hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);z-index:0}
.partner-hero h1,.partner-hero p{position:relative;z-index:1}
.partner-hero h1{font-size:2.8rem;margin:0 0 10px}
.partner-hero p{max-width:720px;margin:0 auto;font-size:1.1rem}

.partner-wrapper{display:flex;flex-wrap:wrap;gap:60px;justify-content:center;align-items:center;padding:90px 20px;position:relative}
.partner-wrapper::before{content:'';position:absolute;z-index:-1;top:0;bottom:0;left:calc(-50vw + 50%);width:100vw;background:repeating-linear-gradient(45deg,#fff,#fff 10px,#f8f8f8 10px,#f8f8f8 20px);animation:waveMove 10s linear infinite}
@keyframes waveMove{0%{background-position:0 0}100%{background-position:40px 0}}
.partner-form{background:#fff;max-width:420px;padding:40px 32px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.08);text-align:left;z-index:1;margin:0 auto;border:1px solid #333;position:relative}
@media(max-width:768px){.partner-wrapper{flex-direction:column}.partner-hero{padding:0 20px 0}.partner-form{transform:none;margin:0 auto}}
.partner-logo{position:absolute;width:60px;height:60px;border-radius:50%;opacity:.7;z-index:0;animation:float infinite ease-in-out}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-15px) rotate(5deg)}}

/* Nestlé family section */
.nestle-family{padding:40px 20px;text-align:center}
.nestle-family h2{margin-bottom:30px}
.nestle-family .companies{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.nestle-family .company{display:flex;flex-direction:column;align-items:center}
.nestle-family .company img{width:80px;height:80px;border-radius:50%;margin-bottom:10px}
.nestle-family .company.etc{align-self:center}
.nestle-family .company.etc .circle{width:80px;height:80px;border-radius:50%;background-color:var(--secondary-color);color:#fff;display:flex;align-items:center;justify-content:center;font-size:40px;margin-bottom:10px}

/* Remove partners main animated background */
.partners-page main{background:none}

/* ========== HERO (index) ========== */
.hero{position:relative;padding:120px 20px;text-align:center;color:#fff;background:var(--hero-bg) center/cover no-repeat}
.hero::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);z-index:0}
.hero h1,.hero p,.hero .view-all-btn{position:relative;z-index:1}
.hero h1{font-size:2.8rem;margin:0 0 10px}
.hero p{max-width:720px;margin:0 auto 10px;font-size:1.1rem}

/* ========== FOOTER ========== */
.site-footer{background:#000;color:#fff;padding:45px 25px;text-align:center}
.footer-container{max-width:1200px;margin:0 auto}
.footer-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;margin-bottom:25px}
.footer-column{flex:1;min-width:200px;text-align:left}
.footer-logo{height:60px;width:auto;margin-bottom:10px}
.footer-nav{display:flex;flex-direction:column;gap:8px}
.footer-nav a{color:#fff;text-decoration:none;font-weight:500}
.footer-nav a:hover{text-decoration:underline}
.footer-copy{margin:0;font-size:.9rem}

/* ========== STICKY HEADER SHADOW ========== */
header.scrolled{box-shadow:0 2px 8px rgba(0,0,0,.1)}

/* Contact page map */
.contact-wrapper .section-layout .map{flex:1;max-width:50%}
.contact-wrapper .section-layout .map iframe{width:100%;height:300px;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.1)}
@media(max-width:768px){.contact-wrapper .section-layout .map{max-width:100%}}

/* Dashboard */
.dashboard-content{opacity:0;transition:opacity .5s ease;padding:20px}
.dashboard-content.loaded{opacity:1}
.dashboard-content h1{font-size:2.5rem;text-align:center;padding:20px 0;width:50%;margin:0 auto}
.dashboard-content p{font-size:1.2rem;text-align:center;padding-bottom:10px;width:50%;margin:0 auto;font-family:'Poppins',sans-serif;font-weight:400}
.document-table{width:100%;margin:0;border-collapse:collapse;box-shadow:0 0 20px rgba(0,0,0,.1);border-radius:8px;overflow:hidden;max-height:400px;overflow-y:auto}
.document-table th,.document-table td{border:1px solid #ddd;padding:6px 10px;text-align:center}
.document-table th{background:#f8f8f8;color:var(--text-color);font-weight:600}
.document-table th:first-child,.document-table td:first-child{width:70%}
.document-table th:last-child,.document-table td:last-child{width:30%}
.document-table tr:hover{background:#f1f1f1}
.file-link{display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--text-color)}
.file-icon{width:20px;height:20px;margin-left:10px}
#share-link{text-align:center;width:50%;margin:0 auto}

/* Email switcher */
.email-switcher{margin-bottom:30px;text-align:center;background:#f9f9f9;padding:20px;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.email-switcher h3{margin-bottom:15px;font-size:1.2rem}
.email-table{width:100%;margin:0;border-collapse:collapse;box-shadow:0 0 20px rgba(0,0,0,.1);border-radius:8px;overflow:hidden;cursor:pointer}
.email-table th,.email-table td{border:1px solid #ddd;padding:6px 10px;text-align:center}
.email-table th{background:#f8f8f8;color:var(--text-color);font-weight:600}
.email-table tr:hover{background:#f1f1f1}
.email-table tr.selected{background:var(--secondary-color);color:#fff}
.email-table tr.selected td{color:#fff}
.email-table tr.other-row td{font-style:italic}

/* Tables container */
.tables-container{display:flex;gap:20px;justify-content:center;align-items:flex-start;max-width:1200px;margin:0 auto}
.tables-container > *{flex:1;max-width:45%}
@media(max-width:768px){
    .tables-container{flex-direction:column;align-items:center}
    .tables-container > *{max-width:100%}
    .dashboard-content h1{font-size:2rem;width:100%}
    .dashboard-content p{font-size:1rem;width:100%}
    #share-link{width:100%}
    .view-all-btn{width:150px;font-size:.9rem}
}

/* Sections max-width */
.contact-hero,.contact-wrapper,.features,.call-to-action,.products{max-width:1200px;margin:0 auto}
.call-to-action{padding-left:40px;padding-right:40px;margin-bottom:60px}
.about-page section{max-width:1200px;margin:0 auto;padding:20px 40px}

/* Error message popup */
#error-message{position:absolute;top:-60px;left:0;width:100%;background:#fff;border:1px solid red;padding:10px;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.2);color:red;text-align:center;font-family:'Poppins',sans-serif}
#error-message::after{content:'';display:block;width:80%;height:1px;background:red;margin:5px auto 0}

/* Larger dashboard headings */
.dashboard-content h1{font-size:3rem;margin-bottom:10px}
.dashboard-content p{font-size:1.4rem;margin-bottom:30px}
@media(max-width:768px){.dashboard-content h1{font-size:2.2rem}.dashboard-content p{font-size:1.1rem}}