/*
Theme Name: MyTeacher Child
Theme URI: https://myteacher.ma
Description: MyTeacher brand styling for the Astra theme — logo colours, Poppins + Nunito fonts, button & card styles, reserved ad slots, and Arabic/RTL support. Sits on top of Astra; keep the Astra theme installed.
Author: MyTeacher
Version: 1.0
Template: astra
Text Domain: myteacher-child
*/

/* ============================================================
   1. BRAND COLOURS  (pulled from the MyTeacher logo)
   ============================================================ */
:root{
  --mt-navy:#213A47;
  --mt-green:#0E9A6E;
  --mt-green-deep:#0A7A56;
  --mt-gold:#E0A93F;
  --mt-gold-deep:#C8902A;
  --mt-cream:#F6F4EC;
  --mt-paper:#FFFFFF;
  --mt-green-tint:#E4F3EC;
  --mt-gold-tint:#FBF1DA;
  --mt-ink-soft:#52646D;
  --mt-line:#E3E0D4;

  --mt-display:'Poppins',-apple-system,'Segoe UI',sans-serif;
  --mt-sans:'Nunito',-apple-system,'Segoe UI',sans-serif;
  --mt-arabic:'Cairo',sans-serif;

  --mt-radius:18px;
  --mt-shadow:0 10px 30px rgba(33,58,71,.10);
  --mt-shadow-lg:0 20px 55px rgba(33,58,71,.18);
}

/* ============================================================
   2. BASE TYPOGRAPHY  — applies site-wide automatically
   ============================================================ */
body,
.ast-container,
p, li, .entry-content{
  font-family:var(--mt-sans);
  color:var(--mt-navy);
}
h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title,
.ast-single-post .entry-title,
.widget-title{
  font-family:var(--mt-display);
  font-weight:800;
  letter-spacing:-.3px;
  color:var(--mt-navy);
}

/* Links use the brand green */
a{ color:var(--mt-green-deep); }
a:hover{ color:var(--mt-green); }

/* ============================================================
   3. BUTTONS  — block buttons + Astra buttons
   ============================================================ */
.wp-block-button__link,
.ast-button,
.button,
button.menu-toggle,
input[type="submit"]{
  font-family:var(--mt-display);
  font-weight:800;
  background-color:var(--mt-green-deep);
  border-color:var(--mt-green-deep);
  color:#fff;
  border-radius:999px;
}
.wp-block-button__link:hover,
.ast-button:hover,
.button:hover,
input[type="submit"]:hover{
  background-color:var(--mt-green);
  border-color:var(--mt-green);
  color:#fff;
}
/* Gold button variant: add the class "mt-btn-gold" to a button block */
.mt-btn-gold .wp-block-button__link,
a.mt-btn-gold{
  background-color:var(--mt-gold);
  border-color:var(--mt-gold);
  color:var(--mt-navy);
}
.mt-btn-gold .wp-block-button__link:hover,
a.mt-btn-gold:hover{ background-color:var(--mt-gold-deep); color:#fff; }
/* Outline variant: add class "mt-btn-outline" */
.mt-btn-outline .wp-block-button__link,
a.mt-btn-outline{
  background:transparent;
  color:var(--mt-navy);
  border:2px solid var(--mt-navy);
}
.mt-btn-outline .wp-block-button__link:hover,
a.mt-btn-outline:hover{ background:var(--mt-navy); color:#fff; }

/* ============================================================
   4. REUSABLE BUILDING BLOCKS
   Add these class names in the block editor
   ("Advanced → Additional CSS class(es)")
   ============================================================ */

/* Small uppercase gold label */
.mt-eyebrow{
  font-family:var(--mt-display);
  font-weight:800;
  font-size:.78rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--mt-gold-deep);
}

/* Soft section background colours */
.mt-bg-cream{ background-color:var(--mt-cream)!important; }
.mt-bg-green-tint{ background-color:var(--mt-green-tint)!important; }
.mt-bg-gold-tint{ background-color:var(--mt-gold-tint)!important; }
.mt-bg-navy{ background-color:var(--mt-navy)!important; color:#fff!important; }
.mt-bg-navy h1,.mt-bg-navy h2,.mt-bg-navy h3,.mt-bg-navy p{ color:#fff!important; }

/* White rounded card with shadow */
.mt-card{
  background:var(--mt-paper);
  border-radius:var(--mt-radius);
  box-shadow:var(--mt-shadow);
  padding:26px 24px;
}

/* Teacher / Student path cards (bold solid colour) */
.mt-path-teacher{
  background:linear-gradient(135deg,var(--mt-green) 0%,var(--mt-green-deep) 100%)!important;
  color:#fff!important; border-radius:var(--mt-radius); padding:26px 24px;
}
.mt-path-student{
  background:linear-gradient(135deg,#2C4A57 0%,var(--mt-navy) 100%)!important;
  color:#fff!important; border-radius:var(--mt-radius); padding:26px 24px;
}
.mt-path-teacher h1,.mt-path-teacher h2,.mt-path-teacher h3,.mt-path-teacher p,
.mt-path-student h1,.mt-path-student h2,.mt-path-student h3,.mt-path-student p{ color:#fff!important; }

/* Level cards with a coloured top stripe */
.mt-level{
  background:var(--mt-paper);
  border:1px solid var(--mt-line);
  border-radius:var(--mt-radius);
  border-top:8px solid var(--mt-green);  /* default = Common Core */
  padding:22px 22px;
}
.mt-level.is-1bac{ border-top-color:var(--mt-gold); }
.mt-level.is-2bac{ border-top-color:var(--mt-navy); }

/* ============================================================
   5. AD SLOTS  — reserved height, no layout jump, labelled
   Wrap your Google ad code in a Group/HTML block with class "mt-ad"
   ============================================================ */
.mt-ad{
  min-height:120px;          /* reserved space so the page never jumps */
  margin:30px auto;
  border:1px dashed #C9C4B4;
  border-radius:14px;
  background:#FAF9F4;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
}
.mt-ad::before{
  content:"Advertisement";
  position:absolute;
  top:8px; left:0; right:0;
  font-family:var(--mt-display);
  font-size:.66rem; letter-spacing:2px; text-transform:uppercase;
  font-weight:800; color:#9A9276;
}
.mt-ad.mt-ad-box{ min-height:250px; }   /* 300x250 size variant */

/* ============================================================
   6. ARABIC / RTL SUPPORT
   - The whole site flips when WordPress site language is Arabic
     (or via a multilingual plugin). Cairo font is applied there.
   - For a single Arabic block inside an English page, add class "mt-ar".
   ============================================================ */
.rtl body,
body.rtl,
[dir="rtl"]{
  font-family:var(--mt-arabic);
}
.rtl h1,.rtl h2,.rtl h3,.rtl h4,.rtl .entry-title{
  font-family:var(--mt-arabic);
}
/* A single Arabic passage inside an otherwise-English page */
.mt-ar{
  font-family:var(--mt-arabic);
  direction:rtl;
  text-align:right;
}

/* ============================================================
   7. ACCESSIBILITY & POLISH
   ============================================================ */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible{
  outline:3px solid var(--mt-gold);
  outline-offset:3px;
}
img{ border-radius:8px; }     /* gentle rounding on images */

@media (prefers-reduced-motion:reduce){
  *{ transition:none!important; scroll-behavior:auto!important; }
}