/* Energy Observer Solutions — hand-written reproduction of the captured
   Drupal "energyobserver" theme. Palette & structure read from app.css. */

:root{
  --marine:#060e9f;        /* brand blue (buttons, accents) */
  --navy:#26374d;          /* logo / headings dark slate */
  --blue:#007dbd;          /* link / hover blue */
  --ink:#212529;           /* body text */
  --gray:#505050;
  --muted:#6c757d;
  --line:#e4e4e4;
  --bg:#ffffff;
  --bg-soft:#f7f7f7;
  --sdg-red:#eb1a2d; --sdg-green:#47773d; --sdg-gold:#fcb712;
  --font:'Brown','Avenir Next','Segoe UI','Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font); font-weight:400;
  color:var(--ink); background:var(--bg);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--blue); text-decoration:none;}
a:hover{color:var(--marine);}
h1,h2,h3,h4{color:var(--navy); font-weight:400; line-height:1.2; margin:0 0 .5em;}
h1{font-size:2.6rem; letter-spacing:-.01em;}
h2{font-size:1.9rem;}
h3{font-size:1.3rem;}
p{margin:0 0 1.1em;}
.container{max-width:1160px; margin:0 auto; padding:0 24px;}
.wrapper{overflow-x:hidden;}

/* ---------- header ---------- */
.header-container{position:sticky; top:0; z-index:50; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.06);}
.header__inner{height:84px; display:flex; align-items:center;}
.header .container{width:100%;}
.hrow{display:flex; align-items:center; gap:24px; height:84px;}
.logo img{width:210px; height:auto;}
.nav{margin-left:auto;}
.list-nav{list-style:none; display:flex; align-items:center; gap:28px; margin:0; padding:0;}
.link-nav{color:var(--navy); font-size:.95rem; letter-spacing:.01em; white-space:nowrap;}
.link-nav:hover,.link-nav.is-active{color:var(--marine);}
.nav__search .form--search{display:flex; align-items:center; border-bottom:1px solid var(--line);}
.nav__search input{border:0; outline:0; font-family:inherit; font-size:.9rem; padding:4px 6px; width:120px; background:transparent; color:var(--ink);}
.nav__search button{border:0; background:transparent; color:var(--muted); cursor:pointer; display:flex; padding:4px;}
.nav__lang{position:relative;}
.link-lang{display:flex; align-items:center; gap:2px; color:var(--navy); font-size:.95rem;}
.lang-dropdown{position:absolute; right:0; top:120%; background:#fff; border:1px solid var(--line); border-radius:6px; min-width:64px; display:none; flex-direction:column; box-shadow:0 8px 24px rgba(0,0,0,.09); overflow:hidden;}
.nav__lang:hover .lang-dropdown{display:flex;}
.lang-dropdown a{padding:8px 14px; color:var(--navy); font-size:.9rem;}
.lang-dropdown a:hover{background:var(--bg-soft);}
.nav-toggle{display:none; width:28px; height:22px; flex-direction:column; justify-content:space-between; margin-left:auto;}
.nav-toggle span{display:block; height:2px; background:var(--navy); border-radius:2px;}
.menu-mobile{display:none; background:#fff; border-top:1px solid var(--line);}
.menu-mobile ul{list-style:none; margin:0; padding:12px 0;}
.menu-mobile a{display:block; padding:12px 0; color:var(--navy); font-size:1.1rem;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; background:var(--marine); color:#fff;
  border:0; border-radius:40px; padding:13px 28px; font-family:inherit; font-size:.95rem; cursor:pointer; transition:background .15s;}
.btn:hover{background:#040b7a; color:#fff;}
.btn--ghost{background:transparent; color:var(--marine); border:1px solid var(--marine);}
.btn--ghost:hover{background:var(--marine); color:#fff;}
.btn .icon--play:before{content:""; display:inline-block; width:0; height:0; border-left:11px solid currentColor; border-top:7px solid transparent; border-bottom:7px solid transparent;}

/* ---------- hero (home) ---------- */
.hero{padding:72px 0 40px; background:var(--bg-soft) url('/img/bg-map-1.jpg') center/cover no-repeat; position:relative;}
.hero:after{content:""; position:absolute; inset:0; background:rgba(255,255,255,.82);}
.hero .container{position:relative; z-index:1; max-width:860px; text-align:center;}
.hero .eyebrow{color:var(--marine); text-transform:uppercase; letter-spacing:.18em; font-size:.8rem; margin-bottom:14px;}
.hero h1{font-size:3rem; margin-bottom:.3em;}
.hero .tagline{font-size:1.5rem; color:var(--navy); margin-bottom:1em;}
.hero .intro{color:var(--gray); font-size:1.05rem; max-width:720px; margin:0 auto 1.4em;}

/* ---------- featured card ---------- */
.section{padding:48px 0;}
.section--soft{background:var(--bg-soft);}
.card-alt{position:relative; border-radius:10px; overflow:hidden; min-height:430px; display:flex; align-items:flex-end; color:#fff;}
.card-alt .card__image{position:absolute; inset:0; background-size:cover; background-position:center;}
.card-alt:after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,14,50,.85) 0%,rgba(6,14,50,.15) 60%,rgba(6,14,50,.05) 100%);}
.card-alt .card__inner{position:relative; z-index:1; padding:40px; max-width:620px;}
.card-alt h2{color:#fff; font-size:2rem;}
.card-alt p{color:rgba(255,255,255,.9);}
.section-title{text-align:center; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-size:.85rem; margin-bottom:28px;}

/* ---------- tiles grid ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.tile{position:relative; border-radius:10px; overflow:hidden; aspect-ratio:16/11; display:block; background:#0b1b33; color:#fff;}
.tile .tile__image{position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .4s;}
.tile:hover .tile__image{transform:scale(1.05);}
.tile:after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,14,40,.78) 0%,rgba(6,14,40,.05) 55%);}
.tile .tile__title{position:absolute; left:18px; right:18px; bottom:16px; z-index:2; color:#fff; font-size:1.02rem; line-height:1.3;}
.tile .tile__play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2; opacity:0; transition:opacity .2s;}
.tile:hover .tile__play{opacity:1;}
.tile:hover:after{background:linear-gradient(0deg,rgba(6,14,40,.85) 0%,rgba(6,14,40,.35) 100%);}

/* ---------- solution detail ---------- */
.detail-hero{position:relative; min-height:460px; display:flex; align-items:flex-end; color:#fff; background:#0b1b33;}
.detail-hero .bg{position:absolute; inset:0; background-size:cover; background-position:center;}
.detail-hero:after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,14,40,.9) 0%,rgba(6,14,40,.2) 70%);}
.detail-hero .container{position:relative; z-index:1; padding-bottom:42px;}
.detail-hero h1{color:#fff; max-width:820px;}
.video-box{margin:34px auto; max-width:900px; aspect-ratio:16/9; background:#0b1b33 center/cover no-repeat; border-radius:10px; position:relative; display:flex; align-items:center; justify-content:center;}
.video-box:after{content:""; position:absolute; inset:0; background:rgba(6,14,40,.45); border-radius:10px;}
.video-box .play-note{position:relative; z-index:1; text-align:center; color:#fff;}
.video-box .play-note .circle{width:72px; height:72px; margin:0 auto 12px;}
.article-body{max-width:760px; margin:0 auto;}
.article-body p{color:#2a2a2a; font-size:1.08rem;}
.sdg-label{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:2px 0 10px;}
.sdg-tags{display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 30px;}
.sdg-tags .tag{display:inline-flex; align-items:center; gap:9px; background:var(--bg-soft); border:1px solid var(--line); border-radius:40px; padding:6px 15px 6px 6px; font-size:.85rem; color:var(--navy);}
.sdg-tags .tag .num{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:var(--marine); color:#fff; font-size:.78rem; flex:0 0 auto;}

/* ---------- generic content pages ---------- */
.page-head{padding:64px 0 10px; text-align:center;}
.page-head h1{font-size:2.8rem;}
.content{max-width:800px; margin:0 auto; padding:20px 0 60px;}
.content h2{margin-top:1.4em; font-size:1.6rem;}
.content h3{margin-top:1.2em; color:var(--marine);}
.content ul{padding-left:1.2em;}
.content li{margin-bottom:.4em;}
.breadcrumb{font-size:.85rem; color:var(--muted); padding:18px 0 0;}
.breadcrumb a{color:var(--muted);}
.lead{font-size:1.2rem; color:var(--gray);}

/* ---------- journal / blog ---------- */
.journal-hero{padding:60px 0 20px; text-align:center;}
.journal-hero .eyebrow{color:var(--marine); text-transform:uppercase; letter-spacing:.16em; font-size:.8rem;}
.post-list{display:grid; grid-template-columns:repeat(2,1fr); gap:30px; padding:30px 0 60px;}
.post-card{border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; background:#fff; transition:box-shadow .2s, transform .2s;}
.post-card:hover{box-shadow:0 14px 40px rgba(6,14,50,.1); transform:translateY(-3px);}
.post-card .cover{display:block; aspect-ratio:16/9; background:#0b1b33 center/cover no-repeat;}
.post-card .pc-body{padding:22px 24px 26px;}
.post-card h3{font-size:1.25rem; margin-bottom:.4em;}
.post-card h3 a{color:var(--navy);}
.post-card h3 a:hover{color:var(--marine);}
.post-card .meta{font-size:.82rem; color:var(--muted); margin-bottom:10px;}
.post-card .excerpt{color:var(--gray); font-size:.98rem;}
.badge-guest{display:inline-block; background:var(--marine); color:#fff; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:20px; margin-left:6px; vertical-align:middle;}

.post-article{max-width:760px; margin:0 auto; padding:10px 0 60px;}
.post-article .post-head{padding:48px 0 10px; text-align:center;}
.post-article .post-head h1{font-size:2.5rem;}
.post-article .meta{color:var(--muted); font-size:.9rem; margin-top:10px;}
.post-article .cover-lg{aspect-ratio:16/8; background:#0b1b33 center/cover no-repeat; border-radius:12px; margin:26px 0 34px;}
.post-article .body{font-size:1.1rem; color:#2a2a2a;}
.post-article .body h2{font-size:1.6rem; margin-top:1.5em;}
.post-article .body a{color:var(--blue); text-decoration:underline; text-underline-offset:2px;}
.post-article .body a:hover{color:var(--marine);}
.author-box{display:flex; gap:16px; align-items:center; border-top:1px solid var(--line); margin-top:40px; padding-top:26px;}
.author-box .ava{width:54px; height:54px; border-radius:50%; background:var(--marine); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex:0 0 auto;}
.author-box .ab-name{color:var(--navy); font-weight:500;}
.author-box .ab-role{color:var(--muted); font-size:.88rem;}
.related{border-top:1px solid var(--line); margin-top:36px; padding-top:28px;}

/* ---------- authors list (about desk) ---------- */
.roster{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding:20px 0 50px;}
.roster .person{text-align:center;}
.roster .ava{width:90px; height:90px; border-radius:50%; background:var(--marine); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 14px;}
.roster .pr-name{color:var(--navy); font-size:1.15rem;}
.roster .pr-role{color:var(--marine); font-size:.85rem; margin-bottom:8px;}
.roster .pr-bio{color:var(--gray); font-size:.92rem;}

/* ---------- footer ---------- */
.cp-footer{background:var(--navy); color:#cfd6e0; margin-top:40px; position:relative; overflow:hidden;}
.cp-footer:before{content:""; position:absolute; width:520px; height:520px; border-radius:50%; background:rgba(255,255,255,.04); top:-240px; right:-120px;}
.footer__inner{position:relative; z-index:1; padding:46px 0 34px;}
.cp-newsletter{text-align:center; margin-bottom:34px;}
.cp-newsletter p{font-size:1.25rem; color:#fff; margin-bottom:16px;}
.form--newsletter{display:flex; justify-content:center; gap:10px; max-width:460px; margin:0 auto;}
.form--newsletter input{flex:1; border:0; border-radius:40px; padding:13px 20px; font-family:inherit; font-size:.95rem;}
.cp-sub-footer{display:flex; align-items:center; gap:20px; border-top:1px solid rgba(255,255,255,.12); padding-top:24px; flex-wrap:wrap;}
.sub-left{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.list-footer{list-style:none; display:flex; gap:22px; margin:0; padding:0; flex-wrap:wrap;}
.list-footer a{color:#aeb7c4; font-size:.88rem;}
.list-footer a:hover{color:#fff;}
.list-socials{margin-left:auto; display:flex; gap:14px;}
.list-socials a{color:#aeb7c4;}
.list-socials a:hover{color:#fff;}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .post-list,.roster{grid-template-columns:1fr;}
  h1{font-size:2.1rem;} .hero h1{font-size:2.2rem;} .hero .tagline{font-size:1.2rem;}
}
@media (max-width:760px){
  .nav,.nav__search{display:none;}
  .nav-toggle{display:flex;}
  .menu-mobile.open{display:block;}
  .grid{grid-template-columns:1fr;}
  .card-alt .card__inner{padding:26px;}
  .list-socials{margin-left:0;}
}