/* ===== Reset & Base ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --clr-primary:#1a2744;
  --clr-accent:#00b4d8;
  --clr-accent2:#ff6b35;
  --clr-bg:#f0f4f8;
  --clr-card:#fff;
  --clr-text:#333;
  --clr-muted:#6c757d;
  --radius:12px;
  --shadow:0 4px 20px rgba(0,0,0,.08);
  /* strand colours */
  --strand-radio:#4361ee;
  --strand-vehicle:#e63946;
  --strand-sensing:#2a9d8f;
  --strand-actuator:#f77f00;
  --strand-solar:#6a994e;
  --strand-lora:#7b2d8e;
}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;line-height:1.65;color:var(--clr-text);background:var(--clr-bg)}

/* ===== Utility ===== */
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.tag{display:inline-block;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:600;color:#fff;margin:2px}

/* ===== Navigation ===== */
.site-nav{background:var(--clr-primary);padding:12px 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.site-nav .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.site-nav .logo{color:#fff;font-size:1.3rem;font-weight:700;text-decoration:none;display:flex;align-items:center;gap:8px}
.site-nav .logo span{font-size:1.5rem}
.nav-links{list-style:none;display:flex;gap:6px;flex-wrap:wrap}
.nav-links a{color:rgba(255,255,255,.85);text-decoration:none;padding:6px 14px;border-radius:8px;font-size:.9rem;transition:all .2s}
.nav-links a:hover,.nav-links a.active{background:rgba(255,255,255,.15);color:#fff}

/* ===== Hero ===== */
.hero{background:linear-gradient(135deg,var(--clr-primary) 0%,#0d1b2a 100%);color:#fff;padding:60px 20px;text-align:center}
.hero h1{font-size:2.6rem;margin-bottom:12px}
.hero p{font-size:1.15rem;opacity:.9;max-width:700px;margin:0 auto 24px}
.hero-badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hero-badges .badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:8px 18px;border-radius:30px;font-size:.85rem;display:flex;align-items:center;gap:6px}

/* ===== Section ===== */
section{padding:50px 0}
section h2{font-size:1.8rem;margin-bottom:8px;color:var(--clr-primary)}
section .section-sub{color:var(--clr-muted);margin-bottom:30px;font-size:1.05rem}

/* ===== Strand Cards (homepage) ===== */
.strand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px}
.strand-card{background:var(--clr-card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.strand-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.12)}
.strand-card .card-top{padding:24px 24px 16px;border-bottom:3px solid var(--clr-accent)}
.strand-card .card-top h3{font-size:1.25rem;margin-bottom:6px}
.strand-card .card-top p{font-size:.9rem;color:var(--clr-muted)}
.strand-card .card-body{padding:16px 24px 24px;flex:1;display:flex;flex-direction:column}
.strand-card .card-body ul{list-style:none;margin-bottom:16px;flex:1}
.strand-card .card-body ul li{padding:4px 0;font-size:.9rem;position:relative;padding-left:20px}
.strand-card .card-body ul li::before{content:'';position:absolute;left:0;top:11px;width:8px;height:8px;border-radius:50%}
.btn{display:inline-block;text-align:center;padding:10px 20px;border-radius:8px;font-weight:600;text-decoration:none;font-size:.9rem;transition:all .2s;cursor:pointer;border:none}
.btn-primary{background:var(--clr-accent);color:#fff}
.btn-primary:hover{background:#0096b7}
.btn-outline{border:2px solid var(--clr-accent);color:var(--clr-accent);background:transparent}
.btn-outline:hover{background:var(--clr-accent);color:#fff}

/* strand-specific border colours */
.strand-card[data-strand="radio"] .card-top{border-color:var(--strand-radio)}
.strand-card[data-strand="radio"] .card-body ul li::before{background:var(--strand-radio)}
.strand-card[data-strand="vehicle"] .card-top{border-color:var(--strand-vehicle)}
.strand-card[data-strand="vehicle"] .card-body ul li::before{background:var(--strand-vehicle)}
.strand-card[data-strand="sensing"] .card-top{border-color:var(--strand-sensing)}
.strand-card[data-strand="sensing"] .card-body ul li::before{background:var(--strand-sensing)}
.strand-card[data-strand="actuator"] .card-top{border-color:var(--strand-actuator)}
.strand-card[data-strand="actuator"] .card-body ul li::before{background:var(--strand-actuator)}
.strand-card[data-strand="solar"] .card-top{border-color:var(--strand-solar)}
.strand-card[data-strand="solar"] .card-body ul li::before{background:var(--strand-solar)}
.strand-card[data-strand="lora"] .card-top{border-color:var(--strand-lora)}
.strand-card[data-strand="lora"] .card-body ul li::before{background:var(--strand-lora)}

/* ===== How It Works (rotation) ===== */
.rotation-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;counter-reset:step}
.rotation-step{background:var(--clr-card);padding:24px;border-radius:var(--radius);box-shadow:var(--shadow);text-align:center;counter-increment:step}
.rotation-step::before{content:counter(step);display:block;width:40px;height:40px;border-radius:50%;background:var(--clr-accent);color:#fff;font-weight:700;line-height:40px;margin:0 auto 12px}
.rotation-step h4{margin-bottom:6px}
.rotation-step p{font-size:.88rem;color:var(--clr-muted)}

/* ===== Strand Detail Page ===== */
.strand-hero{padding:50px 20px;color:#fff;text-align:center}
.strand-hero h1{font-size:2.2rem;margin-bottom:8px}
.strand-hero p{opacity:.9;max-width:600px;margin:0 auto}
.strand-hero.radio{background:linear-gradient(135deg,var(--strand-radio),#3a0ca3)}
.strand-hero.vehicle{background:linear-gradient(135deg,var(--strand-vehicle),#9d0208)}
.strand-hero.sensing{background:linear-gradient(135deg,var(--strand-sensing),#264653)}
.strand-hero.actuator{background:linear-gradient(135deg,var(--strand-actuator),#e85d04)}
.strand-hero.solar{background:linear-gradient(135deg,var(--strand-solar),#386641)}
.strand-hero.lora{background:linear-gradient(135deg,var(--strand-lora),#4a0e5c)}

/* info grid on strand pages */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:40px}
.info-box{background:var(--clr-card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.info-box h3{font-size:1.15rem;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.info-box ul{list-style:disc inside;color:var(--clr-muted)}
.info-box ul li{padding:3px 0;font-size:.92rem}

/* project list on strand pages */
.project-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:24px}
.project-item{background:var(--clr-card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border-left:4px solid var(--clr-accent)}
.project-item h4{margin-bottom:6px}
.project-item p{font-size:.9rem;color:var(--clr-muted);margin-bottom:10px}
.project-item .difficulty{font-size:.78rem;font-weight:600;padding:3px 10px;border-radius:12px;display:inline-block}
.difficulty.ks3{background:#d4edda;color:#155724}
.difficulty.ks4{background:#fff3cd;color:#856404}
.difficulty.stretch{background:#f8d7da;color:#721c24}

/* ===== Cross-Curricular Page ===== */
.cc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.cc-card{background:var(--clr-card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.cc-card h3{margin-bottom:10px;display:flex;align-items:center;gap:8px;font-size:1.1rem}
.cc-card table{width:100%;border-collapse:collapse;font-size:.85rem}
.cc-card table th,.cc-card table td{text-align:left;padding:6px 8px;border-bottom:1px solid #eee}
.cc-card table th{font-weight:600;color:var(--clr-primary)}

/* ===== Digital Project Card ===== */
.card-form{background:var(--clr-card);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);max-width:800px;margin:0 auto}
.card-form h2{margin-bottom:20px;color:var(--clr-primary)}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-weight:600;margin-bottom:5px;font-size:.92rem}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 14px;border:2px solid #e0e0e0;border-radius:8px;font-size:.92rem;font-family:inherit;transition:border-color .2s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--clr-accent)}
.form-group textarea{min-height:80px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.form-actions .btn{padding:12px 24px;font-size:.95rem}

/* saved cards gallery */
.saved-cards{margin-top:40px}
.saved-cards h2{margin-bottom:20px}
.cards-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.portfolio-card{background:var(--clr-card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border-top:4px solid var(--clr-accent);position:relative}
.portfolio-card h3{font-size:1.05rem;margin-bottom:4px}
.portfolio-card .meta{font-size:.8rem;color:var(--clr-muted);margin-bottom:10px}
.portfolio-card .field{margin-bottom:8px}
.portfolio-card .field strong{font-size:.82rem;color:var(--clr-primary);display:block}
.portfolio-card .field p{font-size:.88rem;color:var(--clr-muted)}
.portfolio-card .card-actions{display:flex;gap:8px;margin-top:12px}
.portfolio-card .card-actions button{padding:6px 14px;font-size:.8rem;border-radius:6px;border:none;cursor:pointer;font-weight:600;transition:all .2s}
.btn-delete{background:#fee;color:#c0392b}
.btn-delete:hover{background:#c0392b;color:#fff}
.btn-print{background:#e8f4fd;color:#0077b6}
.btn-print:hover{background:#0077b6;color:#fff}

/* ===== Print ===== */
@media print{
  .site-nav,.hero,.form-actions,.card-actions,.no-print{display:none!important}
  body{background:#fff}
  .portfolio-card{break-inside:avoid;border:1px solid #ccc;box-shadow:none}
  .card-form{box-shadow:none;border:1px solid #ccc}
}

/* ===== Responsive ===== */
@media(max-width:768px){
  .hero h1{font-size:1.8rem}
  .strand-grid,.project-list,.cc-grid,.cards-gallery{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .nav-links{width:100%;justify-content:center}
  .site-nav .container{justify-content:center}
}

/* ===== Footer ===== */
footer{background:var(--clr-primary);color:rgba(255,255,255,.7);text-align:center;padding:24px;font-size:.85rem;margin-top:40px}
footer a{color:var(--clr-accent);text-decoration:none}