/* Global styles for Evelio - simple responsive layout
   Sections marked with [PLACEHOLDER] should be edited with final copy */

:root{
  --brand-green:#1f5d4a;
  --brand-gold:#f2c200;
  --bg:#ffffff;
  --muted:#6b776f;
  --hero-overlay-opacity: 0.5;
  --max-width:1200px;
}
*{box-sizing:border-box}
body{font-family:Inter,Segoe UI,Helvetica,Arial,sans-serif;margin:0;background:var(--bg);color:#0b0b0b}
.container{max-width:var(--max-width);margin:0 auto;padding:clamp(12px,5vw,24px)}

/* Header */
.site-header{position:sticky;top:0;background:#C2F0DD;color:#1f5d4a;z-index:40}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:clamp(4px,3vw,16px);padding:clamp(4px,2vw,12px) clamp(8px,4vw,16px)}
.site-logo{height:clamp(24px,5vw,48px);display:block}
.main-nav{display:flex;gap:clamp(1px,1vw,12px);flex-wrap:nowrap;overflow:hidden}
.nav-link{color:#1f5d4a;text-decoration:none;padding:clamp(3px,1vw,14px) clamp(2px,0.8vw,10px);border-radius:6px;font-weight:600;font-size:clamp(7px,1.8vw,14px);white-space:nowrap}
.nav-link:hover{background:rgba(0,0,0,0.08);color:#0f3d2d}
.header-actions{display:flex;align-items:center;gap:clamp(4px,2vw,8px)}
.lang-select{padding:clamp(5px,1.5vw,8px) clamp(5px,1.5vw,8px);border-radius:6px;border:none;font-size:clamp(9px,2vw,14px)}

/* Hero */
.hero{padding:clamp(30px,10vw,100px) 0;background:linear-gradient(180deg,#f7fbf7 0%, #ffffff 100%);position:relative;overflow:hidden;background-image:url('Images/IntroBackground.webp');background-size:cover;background-position:center;color:#07221a}
.hero::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,var(--hero-overlay-opacity));z-index:0}
.hero-inner{display:flex;gap:clamp(16px,5vw,24px);align-items:center;position:relative;z-index:1}
.hero-content{flex:1;min-width:0}
.hero-content h1{font-size:clamp(20px,6vw,52px);margin:0 0 clamp(12px,3vw,18px) 0;line-height:1.2;font-weight:800}
.hero-content > p{font-size:clamp(11px,3.5vw,18px);margin:0 0 clamp(12px,3vw,18px) 0;color:#0b0b0b;line-height:1.6;font-weight:700}
.hero-art{flex:0 0 clamp(120px,30vw,380px);display:flex;align-items:center;justify-content:center}
.hero-logo{max-width:clamp(100px,25vw,320px);opacity:1}

.section-title{font-size:clamp(18px,5vw,28px);margin-bottom:clamp(10px,3vw,18px);color:var(--brand-green)}
.muted{color:var(--muted)}
.cta-row{margin-top:clamp(12px,3vw,18px);display:flex;gap:clamp(6px,2vw,12px);flex-wrap:wrap}
.btn{display:inline-block;padding:clamp(12px,2vw,16px) clamp(14px,3vw,28px);border-radius:8px;text-decoration:none;font-weight:700;border:0;cursor:pointer;font-size:clamp(13px,2vw,16px);transition:all 0.3s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,0.15)}
.btn.primary{background:var(--brand-gold);color:#000}
.btn.ghost{background:#327057;color:#000;border:none}

/* Grid */
.grid{display:grid;gap:18px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{padding:18px;border-radius:10px;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,0.04);border:1px solid #eef6ee}

/* Feature icons (circular) shown in the small features row */
.features-row{display:flex;gap:clamp(4px,2.5vw,48px);justify-content:center;align-items:center}
.feature-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(3px,1.5vw,10px);text-align:center;width:clamp(100px,22vw,240px);height:clamp(100px,22vw,240px);border-radius:50%;background:#E8F5F1;box-shadow:0 4px 12px rgba(0,0,0,0.08);padding:clamp(8px,2vw,24px);box-sizing:border-box;overflow:hidden}
.feature-outer{width:clamp(28px,7vw,100px);height:clamp(28px,7vw,100px);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative}
.feature-icon{width:clamp(22px,5.5vw,65px);height:clamp(22px,5.5vw,65px);border-radius:50%;background-color:#fff;background-size:50%;background-repeat:no-repeat;background-position:center;display:flex;align-items:center;justify-content:center}
.feature-text-circle{display:none}
.feature-title{margin:0;font-weight:700;font-size:clamp(8px,2vw,15px);color:var(--brand-green);line-height:1.2;min-height:2.4em;display:flex;align-items:center;justify-content:center;text-align:center}
.feature-desc{display:flex;align-items:flex-start;justify-content:center;text-align:center;color:var(--muted);font-size:clamp(0.5rem,1.5vw,0.85rem);line-height:1.3;margin:0;min-height:4.5em}

/* Larger feature sections: image left (full height) and content right */
.feature-section{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;width:100%;margin:0;background:#C2F0DD;overflow:hidden}
.feature-section .feature-img{background-size:cover;background-repeat:no-repeat;background-position:center;align-self:start;width:100%;aspect-ratio:16/9}
.feature-section.left-image .feature-img{grid-column:1/2}
.feature-section.left-image .feature-content{grid-column:2/3;padding:clamp(10px,4vw,48px);background:#C2F0DD}
.feature-section.right-image .feature-img{grid-column:2/3}
.feature-section.right-image .feature-content{grid-column:1/2;padding:clamp(16px,4vw,48px)}
.feature-section .feature-content h3{margin-top:0;font-size:clamp(15px,3.5vw,24px)}
.feature-section .feature-content p{font-size:clamp(11px,2.4vw,16px);line-height:1.4;margin:clamp(6px,1.5vw,16px) 0}
.feature-list{padding-left:clamp(12px,3vw,18px);font-size:clamp(10px,2.2vw,16px);line-height:1.4;margin:clamp(6px,1.5vw,16px) 0}

/* Features section background */
#features{background-image:url('Images/featuresBackground.jpg');background-size:cover;background-position:center;padding:clamp(12px,5vw,36px) 0}

/* Signup tweaks */
.signup-section .feature-content{display:flex;flex-direction:column;justify-content:center}

/* Charging Costs: wide image on desktop, near-square version on mobile */
#costs .feature-img{background-image:url('Images/Charging Costs Core Desktop.webp')}

@media(max-width:700px){
  /* Shrink the text so the content column is short (close to landscape), then
     let the image fill that column completely — no blank gaps, and because the
     column is short the cover-crop stays gentle. */
  .feature-section .feature-img{aspect-ratio:auto;align-self:stretch;height:100%;min-height:100%}
  #costs .feature-img{background-image:url('Images/Charging Costs Core Mobile.webp')}
  .feature-section .feature-content{padding:clamp(8px,2.5vw,16px)}
  .feature-section .feature-content .container{padding:0}
  .feature-section .feature-content h3{font-size:clamp(13px,3.4vw,18px);margin-bottom:4px}
  .feature-section .feature-content p{font-size:clamp(9px,2.4vw,13px);line-height:1.3;margin:4px 0}
  .feature-list{font-size:clamp(9px,2.3vw,13px);line-height:1.3;margin:4px 0;padding-left:14px}
  .feature-list li{margin-bottom:2px}
}

@media(max-width:600px){
  .contact-list{flex-direction:column;gap:clamp(8px,3vw,12px);align-items:center}
}
.page-hero{height:clamp(120px,30vw,200px);background-image:url('Logos/Gradient_background.png');background-size:cover;background-position:center;border-bottom:1px solid rgba(0,0,0,0.04);display:flex;align-items:center}
.page-hero .container{padding:clamp(12px,3vw,24px)}

/* Signup form */
.signup{padding:clamp(20px,5vw,40px) 0}
.signup-form{display:flex;gap:clamp(8px,3vw,12px);justify-content:center;align-items:center;flex-wrap:wrap}
.signup-form input{padding:clamp(10px,2vw,12px) clamp(12px,2.5vw,14px);border-radius:8px;border:1px solid #e6efe6;width:clamp(200px,80vw,320px);font-size:clamp(13px,2vw,16px)}

/* Contact */
.contact{padding:clamp(20px,5vw,40px) 0;background:linear-gradient(180deg,#f9fdf9,#fff)}
.contact-list{list-style:none;padding:0;display:flex;gap:clamp(12px,4vw,24px);justify-content:center;flex-wrap:wrap}
.contact-list li{color:var(--muted);font-size:clamp(13px,2vw,16px)}

/* One Pager: compact multi-column layout aiming to fit a single page */
.onepager{background:linear-gradient(180deg,#f7fbf7,#fff);padding:clamp(12px,3vw,24px) 0}
.op-sheet{max-width:var(--max-width);margin:0 auto;padding:clamp(12px,4vw,32px);background:#fff;border:1px solid #eef6ee;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.05)}
.op-h1{font-size:clamp(20px,3.4vw,30px);color:var(--brand-green);margin:0 0 clamp(10px,2vw,18px);line-height:1.15;text-align:center}
/* The content flows into columns so a lot of text still fits on one page */
.op-columns{column-width:clamp(240px,30vw,340px);column-gap:clamp(20px,3vw,40px)}
.op-topic{break-inside:avoid;margin-bottom:6px}
/* headings never get stranded at the bottom of a column */
.op-h2,.op-h3{break-after:avoid}
.op-h2{font-size:clamp(14px,2vw,18px);color:var(--brand-green);margin:clamp(10px,1.6vw,16px) 0 4px}
.op-h3{font-size:clamp(12px,1.6vw,15px);color:#0b0b0b;margin:8px 0 2px}
.op-text{font-size:clamp(11px,1.5vw,13.5px);line-height:1.4;margin:0 0 6px;color:#222}
.op-list{font-size:clamp(11px,1.5vw,13.5px);line-height:1.4;margin:0 0 6px;padding-left:18px;color:#222}
.op-list li{margin-bottom:2px}

/* Footer */
.site-footer{background:#0f2b24;color:#dfeee7;padding:clamp(12px,3vw,18px)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:clamp(8px,3vw,12px)}
.footer-links a{color:#dfeee7;text-decoration:none;margin-left:clamp(6px,2vw,12px);font-size:clamp(11px,2vw,14px)}

/* Small utility classes */
.muted{opacity:0.85}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Comments: Sections with [PLACEHOLDER] are easy to search and replace in the codebase */

/* ---- Mobile navigation (hamburger) ---- */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;font-size:24px;line-height:1;color:#1f5d4a;padding:4px 8px}
@media(max-width:760px){
  .header-inner{position:relative}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .main-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:2px;
    background:#C2F0DD;padding:8px 16px 14px;
    box-shadow:0 10px 18px rgba(0,0,0,0.12);
    overflow:visible;z-index:50;
  }
  .main-nav.open{display:flex}
  .nav-link{font-size:15px;padding:12px 10px;width:100%;white-space:normal;border-radius:8px}
}