/* Ondo State homepage redesign. Loaded AFTER the styles in header.php.
   Brand colours (#F27405 / #732A10 / #F25D27 / #0D0D0D / #F8F9FA) and fonts (Inter, Poppins) are unchanged. */

:root{
  --od-bg:#fff; --od-alt:#F8F9FA; --od-card:#fff;
  --od-ink:#0D0D0D; --od-muted:#5c5650; --od-line:#e7e1da;
}
.dark{
  --od-bg:#0D0D0D; --od-alt:#141414; --od-card:#1a1a1a;
  --od-ink:#F8F9FA; --od-muted:#a8a29b; --od-line:#2c2a28;
}
.dark body{background:var(--od-bg)}
body{background:var(--od-bg)}
:focus-visible{outline:3px solid var(--ondo-primary);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Header ---------- */
.bg-gradient-to-r.from-ondo-secondary{background-image:none;background-color:#0D0D0D}
header.sticky{border-bottom:1px solid var(--od-line);box-shadow:none}
.dark header.sticky{background:#0D0D0D}
.nav-link{font-size:.95rem}
.nav-link.active{color:var(--ondo-primary)}

/* ---------- Shared ---------- */
.od-section{padding:5.5rem 0;background:var(--od-bg)}
.od-section.alt{background:var(--od-alt)}
.od-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:2.5rem;flex-wrap:wrap}
.od-h2{font-family:Poppins,sans-serif;font-weight:600;font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.15;letter-spacing:-.02em;color:var(--od-ink);max-width:22ch}
.od-sub{color:var(--od-muted);margin-top:.75rem;max-width:56ch;line-height:1.65}
.od-more{color:var(--ondo-primary);font-weight:600;border-bottom:2px solid currentColor;padding-bottom:2px}
.od-more:hover{color:var(--ondo-accent)}
.od-btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--ondo-primary);color:#fff;font-weight:600;padding:.8rem 1.4rem;border-radius:8px}
.od-btn:hover{background:var(--ondo-accent)}
.od-link{display:inline-flex;align-items:center;gap:.6rem;color:#fff;font-weight:500;padding:.8rem .25rem;border-bottom:1px solid rgba(255,255,255,.45)}
.od-link:hover{border-color:#fff}

/* ---------- Hero ---------- */
.od-hero .splide__slide{min-height:clamp(540px,84vh,740px);background-size:cover;background-position:center;display:flex}
.od-hero .slide-overlay{background:linear-gradient(90deg,rgba(13,13,13,.92) 0%,rgba(13,13,13,.74) 45%,rgba(13,13,13,.12) 100%);padding-bottom:4.5rem}
.od-hero-title{font-family:Poppins,sans-serif;font-weight:700;font-size:clamp(2.4rem,6vw,4.75rem);line-height:1.03;letter-spacing:-.03em;max-width:13ch;margin-bottom:1.25rem}
.od-hero-text{font-size:clamp(1rem,1.6vw,1.2rem);line-height:1.65;max-width:50ch;color:rgba(255,255,255,.86);margin-bottom:2rem}
.od-hero-actions{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center}
.od-hero .splide__pagination{display:none}
.od-hero .splide__progress{height:3px}
.od-hero .splide__progress__bar{background:var(--ondo-primary);height:3px}
.od-hero .custom-arrows .splide__arrow{border-radius:8px;width:48px;height:48px;top:42%}
.od-counter{position:absolute;right:2rem;bottom:5.25rem;z-index:10;color:rgba(255,255,255,.7);font-family:Poppins,sans-serif;font-size:.95rem}
.od-counter .current-slide{color:#fff;font-size:1.6rem;font-weight:600}
.od-hero .splide__slide .container{animation:none}
.od-hero .is-active .container{animation:odRise .7s ease-out both}
@keyframes odRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- Quick access ---------- */
.od-quick{position:relative;z-index:20;margin-top:-3.25rem}
.od-quick-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--od-line);border:1px solid var(--od-line);border-radius:14px;overflow:hidden;box-shadow:0 24px 48px -28px rgba(13,13,13,.45)}
@media(min-width:768px){.od-quick-panel{grid-template-columns:repeat(4,1fr)}}
.od-quick-item{display:flex;flex-direction:column;gap:.35rem;background:var(--od-card);padding:1.6rem 1.5rem}
.od-quick-item:hover{background:rgba(242,116,5,.07)}
.od-quick-icon{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;background:rgba(242,116,5,.12);color:var(--ondo-primary);font-size:1.1rem;margin-bottom:.6rem}
.od-quick-item:hover .od-quick-icon{background:var(--ondo-primary);color:#fff}
.od-quick-item h3{font-family:Poppins,sans-serif;font-weight:600;font-size:1.1rem;color:var(--od-ink)}
.od-quick-item p{font-size:.88rem;color:var(--od-muted);line-height:1.5}
.od-quick-item span{font-size:.82rem;font-weight:600;color:var(--ondo-primary);margin-top:.4rem}

/* ---------- AI assistant ---------- */
.od-ai-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:start}
@media(min-width:1024px){.od-ai-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4rem}}
.od-feature{display:flex;gap:1rem;padding:1.25rem 0;border-top:1px solid var(--od-line)}
.od-feature i{color:var(--ondo-primary);font-size:1.2rem;width:1.5rem;margin-top:.2rem}
.od-feature h3{font-weight:600;color:var(--od-ink);margin-bottom:.25rem}
.od-feature p{font-size:.92rem;color:var(--od-muted);line-height:1.55}
.od-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.od-chip{padding:.55rem 1rem;border:1px solid var(--od-line);border-radius:999px;background:var(--od-card);color:var(--od-ink);font-size:.88rem}
.od-chip:hover{background:var(--ondo-primary);border-color:var(--ondo-primary);color:#fff}
.od-ai .ai-chat-interface{border:1px solid var(--od-line);border-radius:16px;box-shadow:none;background:var(--od-card);height:640px}
.od-ai .chat-header{background:var(--ondo-secondary)}
.od-ai .chat-messages-container{background:var(--od-alt)}
.dark .od-ai .chat-messages-container{background:#101010}
.od-ai .chat-input-container{background:var(--od-card);border-color:var(--od-line)}
.od-ai .message-bubble{max-width:86%}
.od-ai .user-message{background:var(--ondo-primary);box-shadow:none}
.od-ai .ai-message{box-shadow:none}

/* ---------- News ---------- */
#homepage-news-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:768px){#homepage-news-grid{grid-template-columns:1.5fr 1fr 1fr}}
#homepage-news-grid .news-card{background:transparent;box-shadow:none;border:0;border-radius:0}
#homepage-news-grid .news-card::before{display:none}
#homepage-news-grid .news-card:hover{transform:none;box-shadow:none}
#homepage-news-grid .news-image-container{height:auto;padding-top:0;aspect-ratio:16/11;border-radius:12px;position:relative;overflow:hidden}
#homepage-news-grid .news-card:first-child .news-image-container{aspect-ratio:4/3}
#homepage-news-grid .news-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#homepage-news-grid .news-card>div:last-child{padding:1.1rem 0 0}
#homepage-news-grid .news-card h3{font-family:Poppins,sans-serif;font-weight:600;letter-spacing:-.01em}
#homepage-news-grid .news-card:first-child h3{font-size:1.5rem;line-height:1.25}
#homepage-news-grid .news-card:hover h3{color:var(--ondo-primary)}
#homepage-news-grid .category-badge{background:none!important;color:var(--ondo-primary);padding:0;font-size:.85rem;text-transform:none;letter-spacing:0;box-shadow:none}
.news-date-badge{position:absolute;top:.9rem;left:.9rem;z-index:10;background:rgba(13,13,13,.78);color:#fff;padding:.25rem .7rem;border-radius:6px;font-size:.75rem;font-weight:600}
.line-clamp-2,.line-clamp-3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-2{-webkit-line-clamp:2}.line-clamp-3{-webkit-line-clamp:3}
.animate-slide-up{animation:odRise .5s ease forwards}

/* ---------- Social ---------- */
.od-social-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:1024px){.od-social-grid{grid-template-columns:1fr 1fr}}
.social-feed{background:var(--od-card);border:1px solid var(--od-line);border-radius:14px;box-shadow:none}
.social-header{background:var(--od-ink);color:var(--od-bg)}
.social-header a{color:inherit}

/* ---------- Environmental dashboard ---------- */
.od-env{background:#0D0D0D;color:#fff;padding:5.5rem 0}
.od-env-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:1024px){.od-env-grid{grid-template-columns:1.15fr 1fr}}
.od-env .map-container{height:620px;border-radius:16px;overflow:hidden;box-shadow:none;border:1px solid rgba(255,255,255,.12)}
.od-env-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1.5rem}
#metricsRadials{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-height:470px;overflow-y:auto}
@media(min-width:768px){#metricsRadials{grid-template-columns:repeat(3,1fr)}}
#metricsRadials .radial-metric{width:auto;height:auto;position:static;background:rgba(255,255,255,.07);border-radius:12px;padding:.9rem .5rem;text-align:center}
#metricsRadials .radial-metric:hover{background:rgba(255,255,255,.13)}
#metricsRadials .radial-metric svg{width:64px;height:64px;transform:rotate(-90deg);margin:0 auto;display:block}
#metricsRadials .radial-bg{fill:none;stroke:rgba(255,255,255,.22);stroke-width:7}
#metricsRadials .radial-fill{fill:none;stroke:#F27405;stroke-width:7;stroke-linecap:round;stroke-dasharray:282;transition:stroke-dashoffset .6s ease}
#metricsRadials .radial-label{position:static;transform:none;font-size:1rem;font-weight:700;margin-top:.5rem;color:#fff}
#metricsRadials .radial-name{font-size:.72rem;color:rgba(255,255,255,.75);margin-top:.1rem;white-space:normal}
#metricsRadials::-webkit-scrollbar{width:6px}
.lga-label{background:transparent!important;border:0!important;box-shadow:none!important;font-size:11px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);white-space:nowrap}
.loading-toast{position:fixed;bottom:20px;right:20px;background:#1e293b;color:#fff;padding:8px 16px;border-radius:40px;font-size:.75rem;z-index:1000;opacity:0;transition:opacity .3s;pointer-events:none}

/* ---------- Gallery mosaic ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:170px;gap:.75rem}
@media(min-width:900px){
  .gallery-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:210px}
  .gallery-grid .gallery-item:nth-child(1){grid-column:span 2;grid-row:span 2}
  .gallery-grid .gallery-item:nth-child(6),.gallery-grid .gallery-item:nth-child(9),.gallery-grid .gallery-item:nth-child(10){grid-column:span 2}
}
.gallery-grid .gallery-item{border-radius:12px;overflow:hidden;transform:none;box-shadow:none}
.gallery-grid .gallery-item:hover{transform:none;box-shadow:none}
.gallery-grid .gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gallery-grid .gallery-item:hover img{transform:scale(1.04)}

/* ---------- Footer ---------- */
.od-footer{background:#0D0D0D;color:#e8e4df;padding:4.5rem 0 2rem}
.od-footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem;padding-bottom:2.5rem;border-bottom:1px solid #2a2725}
.od-footer-greeting{font-family:Poppins,sans-serif;font-weight:600;font-size:clamp(2rem,5vw,3.5rem);line-height:1.05;letter-spacing:-.03em;color:#fff}
.od-footer-greeting span{color:var(--ondo-primary)}
.od-footer-social{display:flex;gap:.6rem}
.od-footer-social a{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;border:1px solid #3a3633;color:#fff}
.od-footer-social a:hover{background:var(--ondo-primary);border-color:var(--ondo-primary)}
.od-footer-grid{display:grid;grid-template-columns:1fr;gap:2.25rem;padding:3rem 0}
@media(min-width:640px){.od-footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.od-footer-grid{grid-template-columns:repeat(5,1fr)}}
.od-footer h3{font-family:Poppins,sans-serif;font-weight:600;font-size:1rem;color:#fff;margin-bottom:1rem}
.od-footer ul{list-style:none;display:grid;gap:.7rem}
.od-footer li,.od-footer li a{font-size:.9rem;color:#a8a29b}
.od-footer li a:hover{color:var(--ondo-primary)}
.od-footer-contact li{display:flex;gap:.75rem;align-items:flex-start}
.od-footer-contact i{color:var(--ondo-primary);margin-top:.25rem;width:1rem}
.od-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem;padding-top:1.5rem;border-top:1px solid #2a2725;font-size:.85rem;color:#8a847d}