/*
Theme Name:   Astra Child — Cosmos
Description:  Child theme for Cosmos Training Center (cosmostc.com) — design tokens, Tajawal, RTL.
Template:     astra
Version:      1.0.0
Author:       Cosmos Training Center
Text Domain:  astra-child-cosmos
*/

/* ==========================================================================
   Cosmos Design Tokens (from build brief §2)
   ========================================================================== */
:root {
	--bl:  #3A72A8; /* primary blue — header, buttons, headings */
	--bld: #2C5A86; /* dark blue — main headings, footer */
	--tl:  #5AAEA4; /* turquoise — free courses, secondary accents */
	--ink: #2B3A47; /* body text */
	--mut: #6E7C89; /* muted text */
	--ln:  #E5EBF1; /* borders */
	--pg:  #F4F8FB; /* page background */

	/* Course type badges */
	--badge-free-bg:  #E4F3F0;
	--badge-free-ink: #2C6B62;
	--badge-paid-bg:  #E7F0F8;
	--badge-paid-ink: #295D8A;
	--badge-live-bg:  #FCEEDB;
	--badge-live-ink: #8A5A12;

	/* Radii */
	--r-card: 12px;
	--r-btn:  9px;
	--r-pill: 20px;

	/* Map tokens onto Tutor LMS custom properties */
	--tutor-color-primary: var(--bl);
	--tutor-color-primary-hover: var(--bld);
	--tutor-body-color: var(--ink);
	--tutor-border-color: var(--ln);
}

/* ==========================================================================
   Base typography & page
   ========================================================================== */
body,
button, input, select, textarea,
.ast-button, .wp-block-button__link {
	font-family: 'Tajawal', sans-serif;
}

body {
	background-color: var(--pg);
	color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--bld);
	font-weight: 700;
}

a {
	color: var(--bl);
}

a:hover, a:focus {
	color: var(--bld);
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.ast-button,
.wp-block-button__link,
button[type="submit"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.wc-block-components-button,
.tutor-btn-primary {
	background-color: var(--bl);
	color: #fff;
	border-radius: var(--r-btn);
	font-weight: 700;
	border: none;
}

.ast-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.wc-block-components-button:hover,
.tutor-btn-primary:hover {
	background-color: var(--bld);
	color: #fff;
}

/* Secondary (outline turquoise) — e.g. "ابدأ مجاناً" */
.cosmos-btn-secondary,
.woocommerce a.button.alt-secondary {
	background: #fff;
	color: var(--tl);
	border: 1px solid var(--tl);
	border-radius: var(--r-btn);
	font-weight: 700;
}

.cosmos-btn-secondary:hover {
	background: var(--badge-free-bg);
	color: var(--badge-free-ink);
}

/* ==========================================================================
   Cards
   ========================================================================== */
.cosmos-card,
.tutor-course-card,
.tutor-card,
.woocommerce ul.products li.product {
	background: #fff;
	border: 0.5px solid var(--ln);
	border-radius: var(--r-card);
	overflow: hidden;
}

/* ==========================================================================
   Course type badges (brief §2 — consistent site-wide)
   ========================================================================== */
.cosmos-badge {
	display: inline-block;
	font-size: 12px;
	padding: 3px 11px;
	border-radius: var(--r-pill);
	font-weight: 500;
	line-height: 1.6;
}

.cosmos-badge--free {
	background: var(--badge-free-bg);
	color: var(--badge-free-ink);
}

.cosmos-badge--paid {
	background: var(--badge-paid-bg);
	color: var(--badge-paid-ink);
}

.cosmos-badge--live {
	background: var(--badge-live-bg);
	color: var(--badge-live-ink);
}

/* ==========================================================================
   Tutor LMS surface tweaks
   ========================================================================== */
.tutor-course-name a,
.tutor-course-name {
	color: var(--bld);
	font-weight: 700;
}

.tutor-meta, .tutor-fs-7 {
	color: var(--mut);
}

/* Price styling: paid blue, free turquoise (mockup .pr / .fr) */
.tutor-course-price .price,
.woocommerce .price {
	color: var(--bld);
	font-weight: 700;
}

/* ==========================================================================
   WooCommerce checkout/notices
   ========================================================================== */
.woocommerce-message,
.wc-block-components-notice-banner.is-success {
	border-top-color: var(--tl);
}

.woocommerce-info,
.wc-block-components-notice-banner.is-info {
	border-top-color: var(--bl);
}

/* ==========================================================================
   Homepage sections (built against cosmos_homepage_mockup.html)
   ========================================================================== */
.cos-sec { padding: 56px 24px; }
.cos-sec--white { background: #fff; border-top: 0.5px solid var(--ln); }

.cos-h2 { text-align: center; font-size: 28px; color: var(--bld); margin: 0 0 8px; font-weight: 700; }
.cos-lead { text-align: center; font-size: 15px; color: var(--mut); margin: 0 0 32px; }

/* Hero */
.cos-hero { display: flex; gap: 36px; align-items: center; flex-wrap: wrap; padding: 56px 24px; }
.cos-hero__txt { flex: 1.4; min-width: 280px; }
.cos-hero__txt h1 { font-size: 38px; line-height: 1.55; color: var(--bld); margin: 0 0 16px; }
.cos-hero__txt h1 em { color: var(--tl); font-style: normal; }
.cos-hero__txt > p { font-size: 17px; line-height: 1.9; margin: 0 0 22px; }
.cos-trust { font-size: 14px; color: var(--mut); margin-top: 16px; }
.cos-trust b { color: var(--bld); }
.cos-hero__viz { flex: 1; min-width: 240px; background: #EAF1F8; border-radius: 16px; padding: 36px; display: flex; align-items: center; justify-content: center; }
.cos-hero__viz img { max-width: 230px; height: auto; border-radius: 50%; }

/* Secondary button (outline turquoise) */
.cos-b2 .wp-block-button__link { background: #fff; color: var(--tl); border: 1px solid var(--tl); }
.cos-b2 .wp-block-button__link:hover { background: var(--badge-free-bg); color: var(--badge-free-ink); }

/* Stats strip */
.cos-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--ln); border-top: 0.5px solid var(--ln); border-bottom: 0.5px solid var(--ln); }
.cos-stat { background: #fff; padding: 22px 10px; text-align: center; }
.cos-stat .num { font-size: 28px; color: var(--bld); font-weight: 700; margin: 0; }
.cos-stat .lbl { font-size: 13px; color: var(--mut); margin: 0; }

/* Grids */
.cos-g4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.cos-g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

/* Value-prop cards */
.cos-vp { background: #fff; border: 0.5px solid var(--ln); border-radius: var(--r-card); padding: 24px; text-align: center; }
.cos-ic { width: 52px; height: 52px; border-radius: 12px; background: #EAF1F8; color: var(--bl); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 26px; }
.cos-vp--usp .cos-ic { background: var(--badge-free-bg); color: var(--tl); }
.cos-vp h3 { font-size: 16px; margin: 0 0 6px; }
.cos-vp p { font-size: 13px; color: var(--mut); line-height: 1.7; margin: 0; }

/* Track cards */
.cos-trk { background: #fff; border: 0.5px solid var(--ln); border-radius: var(--r-card); padding: 24px; }
.cos-trk .cos-ic { margin: 0 0 12px; }
.cos-trk h3 { font-size: 17px; margin: 0 0 6px; }
.cos-trk p { font-size: 13px; color: var(--mut); margin: 0 0 10px; }
.cos-trk a { font-size: 14px; font-weight: 500; }

/* Featured course cards */
.cos-fcard { background: #fff; border: 0.5px solid var(--ln); border-radius: var(--r-card); overflow: hidden; }
.cos-fcard .th { height: 96px; display: flex; align-items: center; justify-content: center; font-size: 34px; background: #EAF1F8; color: var(--bl); margin: 0; }
.cos-fcard .th--free { background: #E9F5F2; color: #4E9E94; }
.cos-fcard .bd { padding: 16px; }
.cos-fcard .bd h3 { font-size: 15px; line-height: 1.5; margin: 0 0 10px; }
.cos-fcard .ft { display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin: 0; }
.cos-price { font-weight: 700; color: var(--bld); }
.cos-free { font-weight: 700; color: var(--tl); }

/* Steps */
.cos-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.cos-step { text-align: center; padding: 8px; }
.cos-step .n { width: 44px; height: 44px; border-radius: 50%; background: var(--bl); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 18px; }
.cos-step h3 { font-size: 16px; margin: 0 0 4px; }
.cos-step p { font-size: 13px; color: var(--mut); line-height: 1.7; margin: 0; }

/* Ask-the-professor band */
.cos-askband { background: var(--bld); border-radius: 14px; padding: 40px 28px; text-align: center; color: #fff; }
.cos-askband .cos-ask-ic { font-size: 34px; color: #9FD8CE; }
.cos-askband h3 { color: #fff; font-size: 24px; margin: 10px 0 8px; }
.cos-askband p { font-size: 15px; color: #CFE0EE; margin: 0 0 20px; line-height: 1.9; }
.cos-askband .wp-block-button__link { background: var(--tl); }
.cos-askband .wp-block-button__link:hover { background: #4E9E94; }

/* Testimonials */
.cos-testi { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.cos-tc { background: #fff; border: 0.5px solid var(--ln); border-radius: var(--r-card); padding: 22px; }
.cos-stars { color: #E7B44E; font-size: 15px; margin: 0 0 10px; }
.cos-tc blockquote, .cos-tc .txt { font-size: 14px; color: var(--ink); line-height: 1.8; margin: 0 0 14px; }
.cos-who { display: flex; align-items: center; gap: 10px; }
.cos-ava { width: 36px; height: 36px; border-radius: 50%; background: #EAF1F8; color: var(--bl); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.cos-who .nm { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; }
.cos-who .rl { font-size: 12px; color: var(--mut); margin: 0; }

/* Final CTA */
.cos-final { background: #EAF1F8; text-align: center; padding: 48px 24px; border-radius: 14px; }
.cos-final h2 { font-size: 26px; margin: 0 0 8px; }
.cos-final p { font-size: 15px; margin: 0 0 20px; }

/* ==========================================================================
   Header / footer alignment with brand
   ========================================================================== */
.ast-primary-header-bar,
.main-header-bar {
	background: #fff;
	border-bottom: 0.5px solid var(--ln);
}

.ast-footer-copyright,
.site-footer {
	background: #243B52;
	color: #C6D3E0;
}

.site-footer a {
	color: #C6D3E0;
}

.site-footer a:hover {
	color: #fff;
}