/* ==========================================================================
   ARYA WONDER KIDS — SCHOOL PORTAL DESIGN SYSTEM
   Shared across: Events, Student Resources, Rules & Regulations, Prospectus
   Load this FIRST on every custom page template, before the page-specific CSS.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:wght@600;700&family=Roboto:wght@400;500;700&display=swap');

:root{

  /* ---- Brand colours (from existing site identity) ---- */
  --awk-navy:        #1a2a5e;
  --awk-navy-light:  #2c3f7c;
  --awk-orange:      #f7941d;
  --awk-orange-dark: #d97b0a;
  --awk-cream:       #fdf1de;

  /* ---- Accent palette (colour-day / category tags) ---- */
  --awk-red:    #e0392f;
  --awk-yellow: #e0a92f;
  --awk-green:  #2fa84f;
  --awk-blue:   #2f5fe0;
  --awk-pink:   #e0507a;
  --awk-purple: #7a4fd6;

  /* ---- Neutrals ---- */
  --awk-white:      #ffffff;
  --awk-bg-soft:    #f7f8fc;
  --awk-text-body:  #4a4f5c;
  --awk-text-muted: #8a8f9c;
  --awk-border:     #ececf3;

  /* ---- Typography ---- */
  --awk-font-heading: 'Fira Sans Extra Condensed', Arial, sans-serif;
  --awk-font-body:    'Roboto', Arial, sans-serif;

  /* ---- Spacing scale ---- */
  --awk-space-xs:  8px;
  --awk-space-sm:  16px;
  --awk-space-md:  24px;
  --awk-space-lg:  40px;
  --awk-space-xl:  64px;
  --awk-space-2xl: 96px;

  /* ---- Radius / shadow ---- */
  --awk-radius-sm: 10px;
  --awk-radius-md: 18px;
  --awk-radius-lg: 28px;
  --awk-radius-pill: 999px;
  --awk-shadow-soft: 0 6px 24px rgba(26,42,94,0.08);
  --awk-shadow-hover: 0 12px 32px rgba(26,42,94,0.14);

  /* ---- Container ---- */
  --awk-max-width: 1200px;
}

/* ==========================================================================
   RESET (scoped — never touches the rest of the WordPress site)
   ========================================================================== */
.awk-page, .awk-page *{ box-sizing:border-box; }
.awk-page{
  font-family:var(--awk-font-body);
  color:var(--awk-text-body);
  font-size:16px;
  line-height:1.7;
}
.awk-page img{ max-width:100%; display:block; }
.awk-page a{ text-decoration:none; }
.awk-page h1,.awk-page h2,.awk-page h3,.awk-page h4{
  font-family:var(--awk-font-heading);
  color:var(--awk-navy);
  font-weight:600;
  line-height:1.25;
  margin:0;
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.awk-container{ max-width:var(--awk-max-width); margin:0 auto; padding:0 24px; }
.awk-section{ padding:var(--awk-space-2xl) 0; }
.awk-section--soft{ background:var(--awk-bg-soft); }
.awk-section--cream{ background:var(--awk-cream); }
.awk-section--navy{ background:var(--awk-navy); color:#fff; }

.awk-eyebrow{
  color:var(--awk-orange);
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  font-size:13px;
  text-align:center;
  display:block;
  margin-bottom:var(--awk-space-xs);
}
.awk-section-title{ text-align:center; font-size:34px; margin-bottom:var(--awk-space-sm); }
.awk-section-sub{
  text-align:center; max-width:680px; margin:0 auto var(--awk-space-lg);
  color:var(--awk-text-muted); font-size:16px;
}

.awk-grid{ display:grid; gap:var(--awk-space-md); }
.awk-grid--2{ grid-template-columns:repeat(2,1fr); }
.awk-grid--3{ grid-template-columns:repeat(3,1fr); }
.awk-grid--4{ grid-template-columns:repeat(4,1fr); }
.awk-grid--6{ grid-template-columns:repeat(6,1fr); }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.awk-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px; border-radius:var(--awk-radius-pill);
  font-family:var(--awk-font-heading); font-weight:600; font-size:15px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  border:2px solid transparent; cursor:pointer;
}
.awk-btn:hover{ transform:translateY(-2px); }
.awk-btn--primary{ background:var(--awk-orange); color:#fff; box-shadow:var(--awk-shadow-soft); }
.awk-btn--primary:hover{ background:var(--awk-orange-dark); box-shadow:var(--awk-shadow-hover); }
.awk-btn--secondary{ background:var(--awk-navy); color:#fff; }
.awk-btn--secondary:hover{ background:var(--awk-navy-light); }
.awk-btn--outline{ background:transparent; border-color:var(--awk-navy); color:var(--awk-navy); }
.awk-btn--outline:hover{ background:var(--awk-navy); color:#fff; }

.awk-pill{
  display:inline-block; padding:6px 18px; border-radius:var(--awk-radius-pill);
  font-size:13px; font-weight:700; border:1.5px solid currentColor;
  transition:background .2s ease, color .2s ease;
}
.awk-pill:hover{ background:currentColor; }
.awk-pill:hover span{ color:#fff; }

/* ==========================================================================
   CARDS (reused as base for icon-card, gallery-card, download-card...)
   ========================================================================== */
.awk-card{
  background:#fff; border-radius:var(--awk-radius-md);
  box-shadow:var(--awk-shadow-soft);
  transition:transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
.awk-card:hover{ transform:translateY(-6px); box-shadow:var(--awk-shadow-hover); }

.awk-icon-circle{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; margin:0 auto var(--awk-space-sm);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:1024px){
  .awk-grid--4{ grid-template-columns:repeat(2,1fr); }
  .awk-grid--6{ grid-template-columns:repeat(3,1fr); }
  .awk-section-title{ font-size:28px; }
}
@media(max-width:640px){
  .awk-grid--2,.awk-grid--3,.awk-grid--4,.awk-grid--6{ grid-template-columns:1fr; }
  .awk-section{ padding:var(--awk-space-xl) 0; }
}