/* =========================================================
   site-core.css — Global foundation (tokens/base/grid/utils)
   Purpose: site-wide styles shared by ALL pages.
   DO NOT include page-specific classes here.
   Layers:
     1) site-core.css      ← you are here (global)
     2) edu-skin.css       ← brand/site-level look & components
     3) education-single.css (or other page CSS) ← per-template
   ========================================================= */

/* 0) Design Tokens (override via edu-skin.css if needed) */
:root{
  /* Brand palette (can be overridden) */
  --primary-color: #17488a;
  --secondary-color: #08915e;
  --contrast-color: #ffffff;

  /* Surfaces / Lines */
  --surface-bg: #ffffff;
  --surface-muted: #f7f9fc;
  --border-color: #e5e7eb;
  --shadow-sm: 0 2px 6px rgba(0,0,0,.06);

  /* Text */
  --default-color: #333333;
  --heading-color: #2d465e;
  --link-color: #17488A;
  --link-hover: #0e2d5c;

  /* Typography */
  --ff: "Source Sans Pro", Arial, sans-serif;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Global sizes */
  --fs-base: 16px;
  --lh-base: 1.8;
  --lh-heading: 1.25;

  /* Heading scale (hero titles are page-specific) */
  --fs-h1: clamp(32px, 2.5vw + 14px, 44px);
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-h5: 16px;
  --fs-h6: 14px;

  /* Layout */
  --container-max: 1345px;
  --container-pad: 15px;
  --radius: 6px;
  --gap: 1rem;

  /* Spacing (8px scale) */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--secondary-color) 30%, transparent);
}

/* 1) Base / Reset */
*,*::before,*::after{ box-sizing: border-box; }
html{ font-size:100%; }
body{
  margin:0;
  color:var(--default-color);
  background:var(--surface-bg);
  font: var(--fw-regular) var(--fs-base)/var(--lh-base) var(--ff);
}
img{ max-width:100%; height:auto; display:block; border:0; }
button,input,select,textarea{ font: inherit; }

/* 2) Global Typography (site-wide) */
h1,h2,h3,h4,h5,h6{
  margin:0 0 var(--sp-3);
  color:var(--heading-color);
  line-height:var(--lh-heading);
  font-family:var(--ff);
  font-weight:var(--fw-semibold);
}
h1{ font-size:var(--fs-h1); font-weight:var(--fw-bold); }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); }
h5{ font-size:var(--fs-h5); }
h6{ font-size:var(--fs-h6); }

p{ margin:0 0 var(--sp-2); }
a{ color:var(--link-color); text-decoration:none; }
a:hover{ color:var(--link-hover); text-decoration:underline; }
strong,b{ color:#111; font-weight:var(--fw-semibold); }

/* 3) Content blocks: consistent body copy rhythm */
.richtext,
.content-article,
.acc-rich{
  text-align: justify;          /* like your reference “image 2” */
  text-justify: inter-word;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
.richtext p, .content-article p, .acc-rich p{ margin:0 0 var(--sp-2); }
.richtext ul, .content-article ul, .acc-rich ul,
.richtext ol, .content-article ol, .acc-rich ol{
  margin:0 0 var(--sp-2) 1.15rem; padding:0;
}
.richtext li, .content-article li, .acc-rich li{ margin:0 0 6px; }

/* Shared section titles (used by many pages) */
.section-title,
.edu-section__title,
.prog-heading,
.main-title,
.certificates-title,
.tuition-heading{
  font-size: var(--fs-h2) !important;
  font-weight: var(--fw-semibold) !important;
  line-height: var(--lh-heading);
  margin: 0 0 var(--sp-4);
  color: #0F1114;
}

/* 4) Container */
.container{
  width:100%; max-width:var(--container-max);
  margin-inline:auto; padding-inline: var(--container-pad);
}
.container-fluid{ width:100%; margin:0; padding-inline: var(--container-pad); }
@media (max-width:1200px){ .container{ max-width:960px; } }
@media (max-width:992px){  .container{ max-width:720px; } }
@media (max-width:768px){  .container{ max-width:540px; } }
@media (max-width:576px){  .container, .container-fluid{ padding-inline:10px; } }

/* 5) Grid (legacy columns) */
.row{ display:flex; flex-wrap:wrap; margin-inline: calc(var(--container-pad) * -1); }
.row > [class^="col-"]{ padding-inline: var(--container-pad); box-sizing:border-box; }
.col-12{ flex:0 0 100%; max-width:100%; }
.col-6{  flex:0 0 50%;  max-width:50%;  }
.col-4{  flex:0 0 33.3333%; max-width:33.3333%; }
.col-3{  flex:0 0 25%; max-width:25%; }
@media (max-width:768px){
  .col-6,.col-4,.col-3{ flex:0 0 100%; max-width:100%; }
}

/* 6) Grid (gap-based, modern) */
.row-gap{ display:flex; flex-wrap:wrap; gap:var(--gap); }
.col{ flex:1 1 0; min-width:0; }
.col-6r{ flex:0 0 calc((100% - var(--gap)) / 2); max-width:calc((100% - var(--gap)) / 2); }
.col-4r{ flex:0 0 calc((100% - 2*var(--gap)) / 3); max-width:calc((100% - 2*var(--gap)) / 3); }
.col-3r{ flex:0 0 calc((100% - 3*var(--gap)) / 4); max-width:calc((100% - 3*var(--gap)) / 4); }
@media (max-width:768px){
  .col-6r,.col-4r,.col-3r{ flex:0 0 100%; max-width:100%; }
}

/* 7) Utilities */
.text-start{text-align:start;} .text-end{text-align:end;}
.text-center{text-align:center;} .text-left{text-align:left;} .text-right{text-align:right;}

.mt-1{margin-top:var(--sp-1);} .mt-2{margin-top:var(--sp-2);}
.mt-3{margin-top:var(--sp-3);} .mt-4{margin-top:var(--sp-4);}
.mb-1{margin-bottom:var(--sp-1);} .mb-2{margin-bottom:var(--sp-2);}
.mb-3{margin-bottom:var(--sp-3);} .mb-4{margin-bottom:var(--sp-4);}
.pt-1{padding-top:var(--sp-1);} .pt-2{padding-top:var(--sp-2);}
.pt-3{padding-top:var(--sp-3);} .pt-4{padding-top:var(--sp-4);}
.pb-1{padding-bottom:var(--sp-1);} .pb-2{padding-bottom:var(--sp-2);}
.pb-3{padding-bottom:var(--sp-3);} .pb-4{padding-bottom:var(--sp-4);}
.px-2{padding-inline: var(--sp-2);} .py-2{padding-block: var(--sp-2);}
.gap-1{ gap: var(--sp-1); } .gap-2{ gap: var(--sp-2); }
.gap-3{ gap: var(--sp-3); } .gap-4{ gap: var(--sp-4); }

.d-flex{display:flex;}
.align-items-start{align-items:flex-start;} .align-items-center{align-items:center;} .align-items-end{align-items:flex-end;}
.justify-content-start{justify-content:flex-start;} .justify-content-center{justify-content:center;}
.justify-content-end{justify-content:flex-end;} .justify-content-between{justify-content:space-between;} .justify-content-around{justify-content:space-around;}

.rounded{ border-radius: var(--radius); }
.shadow-sm{ box-shadow: var(--shadow-sm); }
.w-100{ width:100%; } .h-100{ height:100%; }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* 8) Buttons */
.btn{
  display:inline-block; border:0; cursor:pointer; text-align:center; text-decoration:none;
  padding:10px 20px; border-radius:var(--radius); font-size:1rem;
  transition: background-color .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary{ background:var(--secondary-color); color:var(--contrast-color); }
.btn-primary:hover{ background: color-mix(in srgb, var(--secondary-color), #000 10%); }
.btn-outline{ background:transparent; border:2px solid var(--secondary-color); color:var(--secondary-color); }
.btn-outline:hover{ background:var(--secondary-color); color:var(--contrast-color); }
.btn[disabled], .btn.disabled{ opacity:.6; pointer-events:none; }
.btn:focus-visible{ outline:0; box-shadow: var(--focus-ring); }

/* 9) Forms */
.form-group{ margin-bottom: var(--sp-3); }
.form-label{ display:block; margin-bottom:.5rem; font-weight:var(--fw-semibold); color:var(--heading-color); }
.form-control{
  width:100%; height:44px; padding:0 var(--sp-2); border:1px solid var(--border-color);
  border-radius:var(--radius); background:var(--surface-bg); color:var(--default-color);
  font: var(--fw-regular) var(--fs-base)/var(--lh-base) var(--ff);
}
.form-control:focus{ outline:0; border-color: var(--secondary-color); box-shadow: var(--focus-ring); }
.form-hint{ font-size:.875rem; color:#666; margin-top:6px; }
.form-error{ font-size:.875rem; color:#b42318; margin-top:6px; }

/* 10) Accessibility */
a:focus-visible{ outline:0; box-shadow: var(--focus-ring); border-radius:4px; }

/* 11) Responsive helpers */
@media (max-width:992px){ .hide-lg{ display:none !important; } }
@media (min-width:993px){ .show-lg{ display:none !important; } }

/* 12) Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}