/* ==========================================================================
   Chandigarh Design School — design system for Astra + Elementor
   Attach these classes to Elementor sections/columns/widgets via each
   element's Advanced tab → CSS Classes. No Elementor Pro required.
   ========================================================================== */

:root{
  --paper: #FDF6E9;
  --paper-deep: #F5EBD6;
  --ink: #1C1B18;
  --coral: #FF5B4E;
  --sun: #FFC544;
  --sky: #3FA8E0;
  --grass: #2FAE7F;
  --line: rgba(28,27,24,0.14);
  --shadow: rgba(28,27,24,0.18);
}

/* Base look — paper background + grain texture, site-wide.
   Delete this block if you only want the design system on specific
   pages/sections rather than the whole site. */
body{
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
}
body::before{
  content:""; position:fixed; inset:0;
  background-image: radial-gradient(rgba(28,27,24,0.05) 1px, transparent 1px);
  background-size:3px 3px; pointer-events:none; z-index:0; opacity:0.6;
}
h1,h2,h3,h4,.cds-display{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800; letter-spacing:-0.02em;
}
.cds-hand{ font-family:'Caveat',cursive; font-weight:600; }

/* ---------- Buttons (Elementor Button widget → Advanced → CSS Classes) ---------- */
.btn{
  font-family:'Inter'; font-weight:700; font-size:0.9rem !important;
  padding:11px 20px !important; border-radius:999px !important;
  border:2px solid var(--ink) !important; background:var(--ink); color:var(--paper) !important;
  box-shadow:3px 3px 0 var(--ink); transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); color:var(--paper) !important; }
.btn.alt{ background:var(--sun) !important; color:var(--ink) !important; }
.btn.line{ background:transparent !important; color:var(--ink) !important; box-shadow:none !important; border:2px solid var(--ink) !important; }
.btn.line:hover{ transform:none; background:rgba(28,27,24,0.06) !important; }

/* ---------- Eyebrow badge (Text widget) ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em;
  background:var(--sun); border:2px solid var(--ink); border-radius:999px; padding:6px 14px;
}
.eyebrow .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--coral); animation:cds-pulse 1.8s infinite; }
@keyframes cds-pulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }

/* ---------- Section heading kicker (Heading widget above your H2) ---------- */
.kicker{ font-family:'Caveat'; font-size:1.4rem; color:var(--coral); font-weight:700; display:block; }

/* ---------- Corkboard container (Section) + sticky notes (Inner Column or Text Box widgets) ---------- */
.corkboard{
  background:var(--paper-deep) !important; border:2px solid var(--ink); border-radius:20px;
  padding:40px 28px !important;
  background-image: radial-gradient(rgba(28,27,24,0.07) 1.4px, transparent 1.4px) !important;
  background-size:16px 16px !important;
}
.note{
  background:#fffdf6; border:2px solid var(--ink); border-radius:10px;
  padding:20px 18px 22px !important; box-shadow:4px 4px 0 var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease; position:relative;
}
.note:hover{ transform:translateY(-6px) rotate(0deg) !important; box-shadow:6px 8px 0 var(--shadow); z-index:3; }
.note.rot-1{ transform:rotate(-2.4deg); background:#FFF3C4; }
.note.rot-2{ transform:rotate(1.6deg); background:#FFE1DC; }
.note.rot-3{ transform:rotate(-1.2deg); background:#DCEFFB; }
.note.rot-4{ transform:rotate(2.2deg); background:#DFF4EA; }
.note .pinhead{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%; background:var(--ink);
}

/* ---------- Chips (Text widget, one per chip, inline) ---------- */
.chip{
  display:inline-block; background:#fff; border:2px solid var(--ink); border-radius:999px;
  padding:9px 18px !important; font-weight:700; font-size:0.88rem; box-shadow:3px 3px 0 var(--shadow);
  margin:0 8px 8px 0;
}
.chip.c1{ background:#FFF3C4; } .chip.c2{ background:#FFE1DC; }
.chip.c3{ background:#DCEFFB; } .chip.c4{ background:#DFF4EA; }

/* ---------- Numbered process rows (Section with two Inner Columns: number + text) ---------- */
.process-item{ border-bottom:2px solid var(--ink); padding:24px 0 !important; }
.process-item:first-of-type{ border-top:2px solid var(--ink); }
.process-num{ font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.8rem; color:var(--coral); }

/* ---------- Mentor / achievement / news cards ---------- */
.mentor-card, .achieve-card, .news-card{
  background:#fff !important; border:2px solid var(--ink) !important; border-radius:14px !important;
  padding:20px !important; box-shadow:4px 4px 0 var(--shadow) !important;
  transition:transform .2s ease;
}
.mentor-card:hover, .achieve-card:hover, .news-card:hover{ transform:translateY(-5px); }
.mentor-avatar{
  width:56px; height:56px; border-radius:50%; border:2px solid var(--ink);
  background:var(--sky); display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Bricolage Grotesque'; font-weight:800; font-size:1.1rem;
}
.badge, .tag-pill{
  display:inline-block; font-size:0.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; background:var(--sun); border:1.5px solid var(--ink);
  padding:3px 10px; border-radius:999px;
}

/* ---------- CTA banner (Section) ---------- */
.cta-banner{
  background:var(--coral) !important; border:2px solid var(--ink); border-radius:22px;
  padding:50px 36px !important; text-align:center; box-shadow:8px 8px 0 var(--ink); position:relative;
}
.cta-banner h2, .cta-banner h3{ color:#fff !important; }
.cta-banner p{ color:#FFEDEA !important; }
.cta-banner .btn{ background:#fff !important; color:var(--ink) !important; box-shadow:4px 4px 0 var(--ink); }
.batch-tape, .deadline-tape{
  position:absolute; top:-14px; right:26px; background:var(--sun); border:2px solid var(--ink);
  padding:6px 16px; font-family:'Caveat'; font-weight:700; font-size:1.15rem;
  transform:rotate(4deg); border-radius:6px; display:inline-block;
}

/* ---------- Certification chip strip ---------- */
.cert-chip{
  display:inline-flex; align-items:center; gap:9px; background:#fff; border:2px solid var(--ink);
  border-radius:999px; padding:9px 18px !important; font-weight:700; font-size:0.86rem;
  box-shadow:3px 3px 0 var(--shadow); margin:0 8px 8px 0;
}
.cert-chip .swatch{ display:inline-block; width:11px; height:11px; border-radius:50%; }

/* ---------- Hero wireframe-to-final morph (HTML widget, paste the SVG snippet below) ---------- */
.morph-card{
  position:relative; border:2px solid var(--ink); border-radius:20px; background:#fff;
  padding:22px !important; box-shadow:8px 8px 0 var(--ink); transform:rotate(1.4deg);
}
.morph-card .tag{
  position:absolute; top:-16px; left:22px; background:var(--sky); color:#fff;
  font-family:'Caveat'; font-weight:700; font-size:1.2rem; padding:3px 14px;
  border-radius:8px; border:2px solid var(--ink); transform:rotate(-3deg);
}
.morph-stage{
  position:relative; width:100%; aspect-ratio:4/3.1; border-radius:12px; overflow:hidden;
  background:var(--paper-deep); border:1.5px dashed var(--line);
}
.morph-stage svg{ position:absolute; inset:0; width:100%; height:100%; transition:opacity .6s ease; }
.morph-stage .layer-wire{ opacity:1; }
.morph-stage .layer-final{ opacity:0; }
.morph-card:hover .layer-wire{ opacity:0; }
.morph-card:hover .layer-final{ opacity:1; }
.morph-hint{ text-align:center; font-size:0.8rem; color:#8a8578; margin-top:12px !important; font-weight:600; }

/* ---------- Scroll reveal (JS toggles .cds-in on scroll) ---------- */
.cds-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.cds-reveal.cds-in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  .cds-reveal{ opacity:1; transform:none; }
}

::selection{ background:var(--sun); color:var(--ink); }
:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }