/**
 * Theme Name:     Astra Child
 * Author:         Brainstorm Force
 * Template:       astra
 * Text Domain:	   astra-child
 * Description:    The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
 */

/* ============================================================
   SHAKTI EDUCATION — GLOBAL DESIGN SYSTEM
   File: shakti-design-system.css
   Add to: Astra Child → style.css  (paste at the bottom)
   Or:     Appearance → Customize → Additional CSS

   Rules:
   • No !important — override freely where needed
   • All tokens on :root — available everywhere
   • Typography scoped to .shakti-ds to avoid
     overriding Elementor widgets you don't own
   • Breakpoints: mobile-first
       Base    → < 768px
       Tablet  → min-width: 768px
       Desktop → min-width: 1024px
   ============================================================ */


/* ============================================================
   1. DESIGN TOKENS — :root
      Available as CSS variables across the entire site.
      Use var(--ds-h1) etc. in any custom CSS.
   ============================================================ */

:root {

  /* ── Font family ── */
  --ds-font: 'Figtree', 'Inter', 'Segoe UI', Arial, sans-serif;

  /* ── Brand colors ── */
  --ds-primary:           #0082C6;
  --ds-primary-light:     #33A0DA;
  --ds-primary-dark:      #00639A;
  --ds-brand-dark:        #003F60;

  /* ── Text colors ── */
  --ds-text-primary:      #212529;
  --ds-text-secondary:    #495057;
  --ds-text-muted:        #ADB5BD;
  --ds-text-white:        #FFFFFF;

  /* ── Background colors ── */
  --ds-bg-white:          #FFFFFF;
  --ds-bg-light:          #F8FAFC;
  --ds-bg-grey:           #F6F7F8;
  --ds-bg-dark:           #003F60;

  /* ── UI colors ── */
  --ds-border:            #C7C7C7;
  --ds-separator:         #D9D9D9;
  --ds-accent:            #FFB74D;
  --ds-divider-blue:      #77C2EA;
  --ds-divider-dark:      #39515C;

  /* ── Status colors ── */
  --ds-success:           #28A745;
  --ds-alert:             #FFC107;
  --ds-error:             #DC3545;
  --ds-info:              #17A2B8;

  /* ── Radius ── */
  --ds-radius-sm:         8px;
  --ds-radius-md:         16px;
  --ds-radius-lg:         24px;
  --ds-radius-btn:        6px;

  /* ── Layout ── */
  --ds-max-width:         1200px;
  --ds-container-px:      20px;

  /* ── Spacing scale ── */
  --ds-space-xs:          8px;
  --ds-space-sm:          16px;
  --ds-space-md:          24px;
  --ds-space-lg:          40px;
  --ds-space-xl:          56px;
  --ds-space-2xl:         72px;
  --ds-space-3xl:         100px;

  /* ── Section padding ── */
  --ds-section-py:        48px;   /* mobile */

  /* ── MOBILE type scale  < 768px ──
     p is NEVER below 16px on any breakpoint            */
  --ds-h1:      28px;   --ds-h1-lh: 1.2;
  --ds-h2:      26px;   --ds-h2-lh: 1.2;
  --ds-h3:      22px;   --ds-h3-lh: 1.3;
  --ds-h4:      18px;   --ds-h4-lh: 1.4;
  --ds-h5:      16px;   --ds-h5-lh: 1.4;
  --ds-h6:      15px;   --ds-h6-lh: 1.4;
  --ds-p:       16px;   --ds-p-lh:  1.6;
}


/* ── TABLET  768px – 1023px ── */
@media (min-width: 768px) {
  :root {
    --ds-h1:      36px;
    --ds-h2:      34px;
    --ds-h3:      26px;
    --ds-h4:      22px;
    --ds-h5:      20px;
    --ds-h6:      17px;
    --ds-p:       16px;   /* stays 16px on tablet */

    --ds-section-py: 60px;
  }
}


/* ── DESKTOP  1024px+ ── */
@media (min-width: 1024px) {
  :root {
    --ds-h1:      48px;
    --ds-h2:      48px;
    --ds-h3:      32px;
    --ds-h4:      26px;
    --ds-h5:      24px;
    --ds-h6:      18px;
    --ds-p:       18px;

    --ds-section-py: 72px;
  }
}


/* ============================================================
   2. BASE RESET
      Scoped globally — safe defaults only, nothing opinionated.
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--ds-font);
  color: var(--ds-text-primary);
  background-color: var(--ds-bg-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}


/* ============================================================
   3. CONTAINER UTILITY
      .ds-container or .container — max 1200px, 20px sides
   ============================================================ */

.ds-container,
.container {
  width: min(100%, var(--ds-max-width));
  margin-inline: auto;
  padding-inline: var(--ds-container-px);
}


/* ============================================================
   4. TYPOGRAPHY SYSTEM
      Scoped under .shakti-ds so it only applies where you
      explicitly add the class. This prevents Elementor
      widgets outside your control from being affected.

      Usage: add class="shakti-ds" to your page wrapper div
      in Elementor → Advanced → CSS Classes
   ============================================================ */

/* ── Heading base ── */
.shakti-ds h1,
.shakti-ds h2,
.shakti-ds h3,
.shakti-ds h4,
.shakti-ds h5,
.shakti-ds h6 {
  font-family: var(--ds-font);
  color: var(--ds-text-primary);
  margin: 0;
  padding: 0;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
}

/* ── H1 ── */
.shakti-ds h1 {
  font-size: var(--ds-h1);
  font-weight: 700;
  line-height: var(--ds-h1-lh);
}

/* ── H2 ── */
.shakti-ds h2 {
  font-size: var(--ds-h2);
  font-weight: 700;
  line-height: var(--ds-h2-lh);
}

/* ── H3 ── */
.shakti-ds h3 {
  font-size: var(--ds-h3);
  font-weight: 600;
  line-height: var(--ds-h3-lh);
}

/* ── H4 ── */
.shakti-ds h4 {
  font-size: var(--ds-h4);
  font-weight: 600;
  line-height: var(--ds-h4-lh);
}

/* ── H5 ── */
.shakti-ds h5 {
  font-size: var(--ds-h5);
  font-weight: 600;
  line-height: var(--ds-h5-lh);
}

/* ── H6 ── */
.shakti-ds h6 {
  font-size: var(--ds-h6);
  font-weight: 600;
  line-height: var(--ds-h6-lh);
}

/* ── Paragraph ── */
.shakti-ds p {
  font-size: var(--ds-p);
  font-weight: 400;
  line-height: var(--ds-p-lh);
  color: var(--ds-text-primary);
  margin: 0;
  padding: 0;
}

/* ── Links ── */
.shakti-ds a {
  color: var(--ds-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
.shakti-ds a:hover,
.shakti-ds a:focus-visible {
  color: var(--ds-primary-dark);
}


/* ============================================================
   5. BUTTON SYSTEM
      Usage: <a class="ds-btn ds-btn-primary">Label</a>
   ============================================================ */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--ds-radius-btn);
  font-family: var(--ds-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease,
              transform 0.2s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}

/* Primary — filled blue */
.ds-btn-primary {
  background-color: var(--ds-primary);
  color: var(--ds-text-white);
  border-color: var(--ds-primary);
}
.ds-btn-primary:hover {
  background-color: var(--ds-primary-dark);
  border-color: var(--ds-primary-dark);
  color: var(--ds-text-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 130, 198, 0.3);
}

/* Secondary — blue outline */
.ds-btn-secondary {
  background-color: transparent;
  color: var(--ds-primary);
  border-color: var(--ds-primary);
}
.ds-btn-secondary:hover {
  background-color: var(--ds-primary);
  color: var(--ds-text-white);
}

/* Ghost — white outline (for dark backgrounds) */
.ds-btn-ghost {
  background-color: transparent;
  color: var(--ds-text-white);
  border-color: rgba(255, 255, 255, 0.8);
}
.ds-btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--ds-text-white);
}

/* Light — white bg, dark border (for light backgrounds) */
.ds-btn-light {
  background-color: var(--ds-bg-white);
  color: var(--ds-text-primary);
  border-color: var(--ds-border);
}
.ds-btn-light:hover {
  background-color: var(--ds-primary);
  border-color: var(--ds-primary);
  color: var(--ds-text-white);
}


/* ============================================================
   6. HR DIVIDERS
      Usage: <hr class="ds-hr-blue"> or <hr class="ds-hr-dark">
   ============================================================ */

.ds-hr-blue {
  border: none;
  height: 2px;
  background: var(--ds-divider-blue);
  opacity: 0.6;
  width: 100%;
  display: block;
  margin: 0;
}

.ds-hr-dark {
  border: none;
  height: 2px;
  background: var(--ds-divider-dark);
  opacity: 0.6;
  width: 100%;
  display: block;
  margin: 0;
}

.ds-hr-light {
  border: none;
  height: 1px;
  background: var(--ds-separator);
  width: 100%;
  display: block;
  margin: 0;
}


/* ============================================================
   7. SECTION UTILITY
      Usage: <section class="ds-section ds-section-white">
   ============================================================ */

.ds-section {
  padding-block: var(--ds-section-py);
  width: 100%;
}

.ds-section-white    { background-color: var(--ds-bg-white); }
.ds-section-grey     { background-color: var(--ds-bg-grey); }
.ds-section-light    { background-color: var(--ds-bg-light); }
.ds-section-dark     { background-color: var(--ds-bg-dark); }


/* ============================================================
   8. BANNER UTILITY
      Usage: add class to a div, set bg-image inline or in
      page-specific CSS.
      Aspect ratios match the confirmed banner spec.
   ============================================================ */

/* Desktop/Tablet banner — 30/11 wide cinematic ratio */
.ds-banner {
  width: 100%;
  aspect-ratio: 30 / 11;
  border-radius: var(--ds-radius-lg);
  background-color: var(--ds-bg-grey);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  overflow: hidden;
}

/* Mobile: switch to 4/3 — matches About + Faculty spec */
@media (max-width: 767px) {
  .ds-banner {
    aspect-ratio: 4 / 3;
    border-radius: var(--ds-radius-md);
  }
}


/* ============================================================
   9. STATUS / BADGE UTILITIES
   ============================================================ */

.ds-text-success { color: var(--ds-success); }
.ds-text-alert   { color: var(--ds-alert); }
.ds-text-error   { color: var(--ds-error); }
.ds-text-info    { color: var(--ds-info); }

.ds-bg-success   { background-color: var(--ds-success); }
.ds-bg-alert     { background-color: var(--ds-alert); }
.ds-bg-error     { background-color: var(--ds-error); }
.ds-bg-info      { background-color: var(--ds-info); }


/* ============================================================
   10. BREADCRUMB
       Matches existing site breadcrumb pattern
   ============================================================ */

.ds-breadcrumb-section {
  padding: 26px 0 22px;
}

.ds-breadcrumb-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1px;
  margin: 0;
  padding: 0;
}

.ds-breadcrumb-list li + li::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 0 8px;
  vertical-align: middle;
  background-image: url('/wp-content/uploads/2026/05/breadcrumb-arrow-2.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.ds-breadcrumb-link {
  font-family: var(--ds-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: var(--ds-text-primary);
  text-decoration: none;
  text-transform: capitalize;
}

.ds-breadcrumb-link--inactive {
  color: var(--ds-text-secondary);
}

.ds-breadcrumb-link:hover {
  color: var(--ds-primary-dark);
}

@media (max-width: 767px) {
  .ds-breadcrumb-section {
    display: none;
  }
}


/* ============================================================
   END — SHAKTI EDUCATION DESIGN SYSTEM
   Version: 1.0
   Last updated: May 2026

   FONT SCALE REFERENCE
   ─────────────────────────────────────────────
   Tag   Mobile(<768)  Tablet(768-1023)  Desktop(1024+)
   H1    28px          36px              48px   wt:700
   H2    26px          34px              48px   wt:700
   H3    22px          26px              32px   wt:600
   H4    18px          22px              26px   wt:600
   H5    16px          20px              24px   wt:600
   H6    15px          17px              18px   wt:600
   p     16px          16px              18px   wt:400
   ─────────────────────────────────────────────
   p is NEVER below 16px on any breakpoint
   ============================================================ */