/* =========================================================
   edu-skin.css — Brand/Site-level look & shared components
   Layer order (very important):
     1) site-core.css   ← global tokens/base/grid/utilities
     2) edu-skin.css    ← brand palette + common .edu-* comps
     3) page CSS (e.g., education-single.css) ← per-template
   NOTE: Do NOT style page-specific classes here (e.g., .hero-section).
   ========================================================= */

/* 1) Brand overrides (can safely override core tokens) */
:root{
  /* Brand identity for EDU site */
  --primary-color: #17488a;         /* EDU blue */
  --secondary-color: #08915e;       /* Supporting green */
  --link-color: #17488a;
  --link-hover: #0e2d5c;

  /* Surfaces */
  --surface-bg: #ffffff;
  --surface-muted: #f7f9fc;
  --border-color: #e5e7eb;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0,0,0,.06);

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

/* 2) Page frame wrapper (optional) */
.edu-page{
  background: var(--surface-bg);
  color: var(--default-color);
}

/* 3) Header / Navigation (sticky, brand-colored hover) */
.edu-header{
  position: sticky;
  top: var(--wp-adminbar-h, 0);          /* admin-bar safe */
  z-index: 50;
  background: var(--surface-bg);
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: saturate(150%) blur(6px);
}
.edu-header .edu-nav{
  display:flex; align-items:center; justify-content:space-between;
  min-height:64px; gap: 16px;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 15px;
}
.edu-nav__brand img{ height:40px; width:auto; display:block; }
.edu-nav__menu{ display:flex; gap: 18px; }
.edu-nav__link{
  display:inline-flex; align-items:center; gap:8px;
  padding: 12px 10px;
  color: var(--default-color);
  text-decoration:none;
  border-radius: 6px;
  transition: background-color .2s ease, color .2s ease;
}
.edu-nav__link:hover,
.edu-nav__link[aria-current="page"]{
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
}
.edu-nav__toggle{ display:none; }

@media (max-width: 992px){
  .edu-nav__menu{ display:none; }
  .edu-nav__toggle{ display:inline-flex; }
}

/* 4) Generic “site hero” (NOT the education-single hero) */
.edu-hero{
  position:relative; isolation:isolate;
  padding-block: clamp(48px, 6vw, 96px);
  background:
    radial-gradient(1200px 600px at 80% -10%, color-mix(in srgb, var(--primary-color) 8%, transparent) 0%, transparent 70%),
    linear-gradient(to bottom, var(--surface-bg), var(--surface-muted));
}
.edu-hero__wrap{ max-width: var(--container-max); margin-inline:auto; padding-inline:15px; }
.edu-hero__eyebrow{
  display:inline-block; font-size:.875rem; font-weight:600;
  color: var(--primary-color); letter-spacing:.02em; margin-bottom:.5rem;
}
.edu-hero__title{
  font-size: var(--fs-h1);
  line-height: 1.1;
  color: var(--heading-color);
  margin-bottom: 16px;
}
.edu-hero__subtitle{
  font-size: clamp(16px, 2.2vw, 18px);
  color:#4b5563; max-width: 72ch; margin-bottom: 20px;
}
.edu-hero__cta{ display:flex; gap: 12px; flex-wrap:wrap; }

/* 5) Standard sections (site-wide) */
.edu-section{ padding-block: clamp(40px, 6vw, 80px); }
.edu-section--alt{ background: var(--surface-muted); }
.edu-section__hd{ margin-bottom: 24px; }
.edu-section__title{
  /* actual sizes come from site-core section-title mapping */
  composes: section-title; /* (conceptual) keep headings consistent */
}
.edu-section__lead{
  color:#4b5563; max-width:72ch;
}

/* 6) Shared grids & cards (skin layer) */
.edu-grid{
  display:flex; flex-wrap:wrap; gap: 24px;
}
.edu-grid--3 > *{
  flex: 0 0 calc((100% - 2*24px)/3);
  max-width: calc((100% - 2*24px)/3);
}
.edu-grid--2 > *{
  flex: 0 0 calc((100% - 24px)/2);
  max-width: calc((100% - 24px)/2);
}
@media (max-width: 992px){
  .edu-grid--3 > *, .edu-grid--2 > *{ flex:0 0 100%; max-width:100%; }
}

.edu-card{
  background: var(--surface-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display:flex; flex-direction:column; min-height:100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.edu-card:hover{ transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.edu-card__media img{ width:100%; height:auto; display:block; }
.edu-card__body{ padding: 16px; }
.edu-card__title{
  font-size: var(--fs-h4);
  color: var(--heading-color);
  margin-bottom: 8px;
}
.edu-card__meta{ font-size:.875rem; color:#6b7280; margin-bottom:12px; }
.edu-card__actions{
  margin-top:auto; padding: 16px; border-top:1px solid var(--border-color);
}

/* 7) CTA blocks */
.edu-cta{
  display:flex; align-items:center; justify-content:space-between; gap: 16px;
  padding: clamp(16px, 3vw, 24px);
  border: 1px dashed color-mix(in srgb, var(--primary-color) 30%, #e5e7eb);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-color) 6%, var(--surface-bg));
}
.edu-cta__title{ font-size: var(--fs-h3); margin:0; color: var(--heading-color); }
.edu-cta__actions{ display:flex; gap: 12px; flex-wrap:wrap; }

/* 8) Forms (skin tweaks above core) */
.edu-form .form-group{ margin-bottom: 24px; }
.edu-form .form-control{ height:46px; }
.edu-form textarea.form-control{
  height:auto; min-height:120px; padding-block: 12px;
}
.edu-form .form-actions{ display:flex; gap: 12px; flex-wrap:wrap; }

/* 9) Tables (compact, brand-aligned) */
.edu-table{
  width:100%; border-collapse:collapse;
  background: var(--surface-bg); border:1px solid var(--border-color);
}
.edu-table th, .edu-table td{
  padding: 12px 14px; border-top:1px solid var(--border-color); text-align:start;
}
.edu-table th{
  background: var(--surface-muted);
  color: var(--heading-color);
  font-weight: 600;
}

/* 10) Badges & pills (generic) */
.edu-badge{
  display:inline-block; padding: 4px 10px; border-radius: 999px;
  font-size:.75rem; font-weight:600; color:#fff; background: var(--primary-color);
}
.edu-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 12px; border-radius: 999px;
  border:1px solid var(--border-color); background: var(--surface-bg);
}

/* 11) RTL micro adjustments */
html[dir="rtl"] .edu-nav__menu{ gap: 18px; }
html[dir="rtl"] .edu-cta{ text-align:start; }

/* 12) Accessibility focus */
.edu-nav__link:focus-visible,
.edu-cta a:focus-visible,
.edu-card a:focus-visible{
  outline:0; box-shadow: var(--focus-ring); border-radius:6px;
}

/* 13) Admin bar offsets for sticky headers (safe globally) */
:root { --wp-adminbar-h: 0px; }
body.admin-bar { --wp-adminbar-h: 32px; }
@media (max-width: 782px){ body.admin-bar { --wp-adminbar-h: 46px; } }

/* 14) Responsive fine-tuning */
@media (max-width: 768px){
  .edu-hero__cta{ flex-direction:column; align-items:stretch; }
  .edu-cta{ flex-direction:column; align-items:stretch; }
}