/* ============================================================
   HABIB EDUCATION CONSULTANCY — Brand tokens & base
   Teal primary identity · brick-red CTA · Poppins / Source Sans 3
   Extracted from the live site (logo teal, footer gradient, red Apply CTA)
   Note: Google Fonts is now loaded via its own <link> in functions.php
   (wp_enqueue_style('habib-google-fonts', ...)) instead of @import here,
   so the browser can fetch it in parallel instead of waiting on this file.
   ============================================================ */

:root{
  /* ---- Brand teal ramp ---- */
  --teal-900:#093C46;
  --teal-800:#0A4A56;
  --teal-700:#0E6E80;   /* footer deep */
  --teal-600:#117C84;   /* primary */
  --teal-500:#149099;
  --teal-400:#1FA39A;
  --teal-300:#40B39F;   /* logo bright */
  --teal-100:#D6ECEC;
  --teal-50:#EEF7F7;

  --brand:#117C84;
  --brand-dark:#0E6E80;
  --brand-deep:#0A4A56;

  /* ---- Accents ---- */
  --coral:#C0382A;      /* primary CTA — Apply Now */
  --coral-dark:#A52E22;
  --coral-soft:#FBEDEA;
  --blue:#1A66C9;       /* service: Apply */
  --blue-soft:#E9F1FC;
  --green:#1B9E6B;      /* service: Mitra */
  --green-soft:#E6F5EE;
  --amber:#E0A23A;      /* QS ranking badges */
  --amber-soft:#FBF1DE;

  /* ---- Ink & neutrals ---- */
  --ink:#13242B;
  --ink-2:#33474F;
  --slate:#5E7178;
  --muted:#8FA1A7;
  --line:#E4EBEC;
  --line-2:#EEF2F3;
  --bg:#FFFFFF;
  --bg-soft:#F4F8F8;
  --bg-tint:#EEF6F6;

  /* ---- Type ---- */
  --font-head:'Poppins',system-ui,sans-serif;
  --font-body:'Source Sans 3',system-ui,sans-serif;

  /* ---- Radius & shadow ---- */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(19,36,43,.06),0 1px 3px rgba(19,36,43,.05);
  --sh-md:0 6px 16px rgba(19,36,43,.08),0 2px 6px rgba(19,36,43,.05);
  --sh-lg:0 18px 44px rgba(19,36,43,.13),0 6px 14px rgba(19,36,43,.07);
  --sh-teal:0 14px 34px rgba(17,124,132,.28);
  --sh-coral:0 12px 28px rgba(192,56,42,.30);

  /* ---- Layout ---- */
  --maxw:1240px;
  --gradient-footer:linear-gradient(100deg,#0E6E80 0%,#13868C 48%,#1A66C9 130%);
  --gradient-teal:linear-gradient(135deg,#0E6E80 0%,#149099 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--bg); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5{font-family:var(--font-head); color:var(--ink); margin:0; line-height:1.12; font-weight:700; letter-spacing:-.02em;}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
button{font-family:var(--font-body); cursor:pointer; border:none; background:none}

/* ---- Reusable bits ---- */
.eyebrow{
  font-family:var(--font-head); font-weight:600; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--brand);
}
.btn{
  display:inline-flex; align-items:center; gap:.55em; justify-content:center;
  font-family:var(--font-head); font-weight:600; font-size:16px;
  padding:14px 26px; border-radius:var(--r-pill); transition:.22s ease;
  white-space:nowrap; cursor:pointer; line-height:1;
}
.btn-primary{background:var(--coral); color:#fff; box-shadow:var(--sh-coral);}
.btn-primary:hover{background:var(--coral-dark); transform:translateY(-2px);}
.btn-teal{background:var(--brand); color:#fff; box-shadow:var(--sh-teal);}
.btn-teal:hover{background:var(--brand-dark); transform:translateY(-2px);}
.btn-ghost{background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.55); backdrop-filter:blur(6px);}
.btn-ghost:hover{background:rgba(255,255,255,.22);}
.btn-outline{background:#fff; color:var(--brand); border:1.5px solid var(--line);}
.btn-outline:hover{border-color:var(--brand); color:var(--brand-dark);}

/* image placeholder treatment */
.ph{
  position:relative; overflow:hidden; background:
    linear-gradient(135deg,var(--teal-50),#fff 60%);
  display:flex; align-items:center; justify-content:center;
}
.ph::after{
  content:attr(data-label); position:absolute; bottom:10px; left:10px;
  font-family:var(--font-head); font-size:11px; font-weight:600; letter-spacing:.05em;
  color:var(--teal-600); background:rgba(255,255,255,.82); padding:3px 9px; border-radius:var(--r-pill);
}