/* =====================================================================
   PEDO INTERNSHIP PORTAL 2026 — Public Site Styles
   Design tokens:
   --navy   #0B2545  primary / trust (PEDO institutional colour)
   --teal   #0F6E6E  secondary / growth
   --amber  #F2A93B  accent / "spark" — energy motif for PEDO
   --bg     #F7F9FA  page background
   --ink    #101720  body text
   Display face: 'Sora' | Body face: 'Inter'
   Signature element: animated circuit/spark trace that threads down
   the page linking hero -> stats -> programs, echoing both PEDO's
   electric-distribution identity and an intern's career path.
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy:#0B2545;
  --navy-deep:#071A32;
  --teal:#0F6E6E;
  --amber:#F2A93B;
  --amber-deep:#D98F1E;
  --bg:#F7F9FA;
  --card:#FFFFFF;
  --ink:#101720;
  --muted:#5B6672;
  --border:#E5EAF0;
  --radius-lg:20px;
  --radius-md:14px;
  --font-display:'Sora', sans-serif;
  --font-body:'Inter', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body);
  line-height:1.6;
}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--navy); margin:0 0 .5rem;}
a{color:inherit;}
img{max-width:100%; display:block;}
.container-xl{max-width:1240px; margin:0 auto; padding:0 1.25rem;}
.eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; font-weight:700;
  color:var(--teal); display:inline-flex; align-items:center; gap:.5rem;
}
.eyebrow::before{content:''; width:22px; height:2px; background:var(--amber); display:inline-block;}

/* Skip link for keyboard/screen reader users */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--navy); color:#fff; padding:.75rem 1.25rem;
  z-index:2000; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

/* ---- Embed back-link (subpages only — no site nav in this build) ---- */
.embed-back-link{padding:1rem 1.25rem 0;}
.embed-back-link a{
  display:inline-flex; align-items:center; gap:.5rem; color:var(--navy); font-weight:700;
  text-decoration:none; font-size:.88rem;
}
.embed-back-link a:hover{color:var(--teal);}

/* ---- Top utility bar ---- */
.topbar{background:var(--navy-deep); color:#C7D2E3; font-size:.8rem; padding:.4rem 0;}
.topbar .container-xl{display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;}
.topbar a{color:#C7D2E3; text-decoration:none; margin-right:1rem;}
.topbar a:hover{color:#fff;}

/* ---- Navigation ---- */
.navbar-pedo{
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:1000; border-bottom:1px solid var(--border);
}
.navbar-pedo .container-xl{display:flex; align-items:center; justify-content:space-between; padding-block:.75rem;}
.brand-mark{display:flex; align-items:center; gap:.6rem; text-decoration:none;}
.brand-mark .logo-badge{
  width:42px; height:42px; border-radius:10px; background:linear-gradient(135deg,var(--navy),var(--teal));
  display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:800;
}
.brand-mark .brand-text{font-family:var(--font-display); font-weight:700; color:var(--navy); font-size:1.05rem; line-height:1.1;}
.brand-mark .brand-text small{display:block; font-weight:500; color:var(--muted); font-size:.68rem;}

.nav-links{display:flex; gap:1.5rem; list-style:none; margin:0; padding:0; align-items:center;}
.nav-links a{text-decoration:none; font-weight:600; font-size:.9rem; color:var(--ink); position:relative;}
.nav-links a:hover{color:var(--teal);}
.nav-links .btn-apply{
  background:var(--amber); color:var(--navy-deep); padding:.55rem 1.1rem; border-radius:999px; font-weight:700;
}
.nav-links .btn-apply:hover{background:var(--amber-deep);}
.nav-toggle{display:none; background:none; border:none; font-size:1.4rem; color:var(--navy);}

/* ---- Hero / Slider ---- */
.hero{position:relative; overflow:hidden; background:var(--navy-deep);}
.hero .swiper{height:min(78vh, 640px); min-height:460px;}
.hero-slide{
  position:relative; height:100%; display:flex; align-items:center;
  background-size:cover; background-position:center;
}
.hero-slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(7,26,50,.92) 0%, rgba(7,26,50,.72) 45%, rgba(15,110,110,.35) 100%);
}
.hero-slide-content{position:relative; z-index:2; color:#fff; max-width:640px; padding:0 1.25rem;}
.hero-slide-content .eyebrow{color:var(--amber);}
.hero-slide-content .eyebrow::before{background:#fff;}
.hero-slide-content h1{color:#fff; font-size:clamp(2rem, 4vw, 3.1rem); font-weight:800; line-height:1.1; margin:.6rem 0 .9rem;}
.hero-slide-content p{color:#DCE4EF; font-size:1.05rem; max-width:520px; margin-bottom:1.6rem;}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.5rem; border-radius:999px;
  font-weight:700; text-decoration:none; font-size:.92rem; border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--amber); color:var(--navy-deep);}
.btn-primary:hover{box-shadow:0 10px 24px rgba(242,169,59,.35);}
.btn-outline-light{border-color:rgba(255,255,255,.55); color:#fff;}
.btn-outline-light:hover{background:rgba(255,255,255,.12);}
.btn-teal{background:var(--teal); color:#fff;}

.swiper-pagination-bullet{background:#fff; opacity:.5;}
.swiper-pagination-bullet-active{opacity:1; background:var(--amber);}
.swiper-button-next, .swiper-button-prev{color:#fff !important; --swiper-navigation-size:22px;}

/* ---- Signature: spark trace ---- */
.spark-trace{position:relative; height:64px; margin:-32px auto 0; max-width:1240px; z-index:5; pointer-events:none;}
.spark-trace svg{width:100%; height:100%; overflow:visible;}
.spark-trace path{
  fill:none; stroke:var(--amber); stroke-width:2; stroke-dasharray:6 8; stroke-linecap:round;
  animation:spark-flow 3.2s linear infinite;
}
@keyframes spark-flow{ to{ stroke-dashoffset:-140; } }
.spark-node{fill:var(--amber); filter:drop-shadow(0 0 6px rgba(242,169,59,.7));}

/* ---- Stats ---- */
.stats-section{padding:2.5rem 0 1rem;}
.stats-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;}
.stat-block{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.5rem 1rem; text-align:center;
}
.stat-block .num{font-family:var(--font-display); font-size:2rem; font-weight:800; color:var(--navy);}
.stat-block .num span{color:var(--amber-deep);}
.stat-block .lbl{color:var(--muted); font-size:.85rem; font-weight:600;}

/* ---- In-portal quicklinks (not a site nav) ---- */
.portal-quicklinks{display:flex; gap:1rem; justify-content:center; padding:.5rem 0 1rem; flex-wrap:wrap;}
.portal-quicklinks a{
  display:inline-flex; align-items:center; gap:.5rem; padding:.55rem 1.1rem; border-radius:999px;
  border:1px solid var(--border); color:var(--navy); text-decoration:none; font-weight:700; font-size:.85rem;
  background:var(--card);
}
.portal-quicklinks a:hover{border-color:var(--teal); color:var(--teal);}

/* ---- Section shell ---- */
.section{padding:4.5rem 0;}
.section-head{max-width:640px; margin-bottom:2.5rem;}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem);}
.section-head p{color:var(--muted);}
.bg-navy{background:var(--navy);}
.bg-navy h2, .bg-navy .section-head p{color:#fff;}
.bg-navy .section-head p{color:#B9C4D6;}

/* ---- Program cards ---- */
.program-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.25rem;}
.program-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.5rem; transition:transform .2s ease, box-shadow .2s ease;
}
.program-card:hover{transform:translateY(-6px); box-shadow:0 16px 32px rgba(11,37,69,.1);}
.program-card .icon{
  width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,var(--teal),var(--navy));
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:1rem;
}
.program-card h3{font-size:1.05rem;}
.program-card p{color:var(--muted); font-size:.9rem; min-height:60px;}
.program-card a{font-weight:700; color:var(--teal); text-decoration:none; font-size:.88rem;}

/* ---- Tabs ---- */
.tabs-nav{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; border-bottom:1px solid var(--border);}
.tabs-nav button{
  background:none; border:none; padding:.85rem 1.1rem; font-weight:700; color:var(--muted);
  border-bottom:3px solid transparent; cursor:pointer; font-family:var(--font-body); font-size:.92rem;
}
.tabs-nav button.active{color:var(--navy); border-color:var(--amber);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ---- Intern cards ---- */
.intern-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem;}
.intern-card{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  background:rgba(255,255,255,.7); backdrop-filter:blur(6px); border:1px solid var(--border);
  box-shadow:0 6px 18px rgba(11,37,69,.06); transition:transform .2s ease;
}
.intern-card:hover{transform:translateY(-4px);}
.intern-card .photo{height:190px; background-size:cover; background-position:center;}
.intern-card .body{padding:1.1rem;}
.intern-card h3{font-size:1rem; margin-bottom:.1rem;}
.intern-card .role{color:var(--teal); font-weight:700; font-size:.8rem; margin-bottom:.5rem;}
.intern-card .meta{font-size:.8rem; color:var(--muted); margin-bottom:.75rem;}
.intern-card .socials{display:flex; gap:.6rem; margin-bottom:.85rem;}
.intern-card .socials a{
  width:30px; height:30px; border-radius:50%; background:var(--bg); display:flex; align-items:center;
  justify-content:center; color:var(--navy); text-decoration:none; font-size:.85rem;
}
.intern-card .actions{display:flex; gap:.5rem;}
.intern-card .actions a{flex:1; text-align:center; font-size:.8rem; padding:.5rem; border-radius:8px; text-decoration:none; font-weight:700;}
.intern-card .actions .view{background:var(--navy); color:#fff;}
.intern-card .actions .resume{background:var(--bg); color:var(--navy); border:1px solid var(--border);}

/* ---- Batch pills ---- */
.batch-pills{display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1.75rem;}
.batch-pills button{
  border:1px solid var(--border); background:var(--card); padding:.5rem 1rem; border-radius:999px;
  font-weight:700; font-size:.85rem; cursor:pointer; color:var(--muted);
}
.batch-pills button.active{background:var(--navy); border-color:var(--navy); color:#fff;}

/* ---- Apply form ---- */
.apply-panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem;}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;}
.form-grid .full{grid-column:1 / -1;}
.field label{display:block; font-weight:600; font-size:.85rem; margin-bottom:.35rem;}
.field input, .field select, .field textarea{
  width:100%; padding:.7rem .85rem; border:1px solid var(--border); border-radius:10px; font-family:var(--font-body); font-size:.92rem;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:3px solid rgba(15,110,110,.25); border-color:var(--teal);
}
@media (max-width:720px){ .form-grid{grid-template-columns:1fr;} .stats-grid{grid-template-columns:repeat(2,1fr);} }

/* ---- Footer ---- */
footer.site-footer{background:var(--navy-deep); color:#B9C4D6; padding:3.5rem 0 1.5rem; font-size:.9rem;}
footer.site-footer h4{color:#fff; font-size:.95rem;}
footer.site-footer a{color:#B9C4D6; text-decoration:none;}
footer.site-footer a:hover{color:var(--amber);}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); margin-top:2.5rem; padding-top:1.5rem; text-align:center; font-size:.8rem;}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} }

/* ---- Accessibility toolbar ---- */
.a11y-bar{position:fixed; right:1rem; bottom:1rem; z-index:1500; display:flex; flex-direction:column; gap:.5rem;}
.a11y-btn{
  width:44px; height:44px; border-radius:50%; background:var(--navy); color:#fff; border:none;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(11,37,69,.3); cursor:pointer;
}
body.high-contrast{ --bg:#000; --ink:#fff; --card:#111; --border:#444; --muted:#ccc; }
body.large-text{ font-size:112%; }
:focus-visible{ outline:3px solid var(--amber); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

@media print{
  .navbar-pedo, footer.site-footer, .a11y-bar, .d-print-none{ display:none !important; }
}

@media (max-width:900px){
  .nav-links{position:fixed; inset:64px 0 0 0; background:#fff; flex-direction:column; padding:2rem; display:none; overflow-y:auto;}
  .nav-links.open{display:flex;}
  .nav-toggle{display:block;}
}