/*
Theme Name: Teacha
Theme URI: https://staging.whappenstar.com/
Description: Custom child theme for Teacha — LMS built on Tutor LMS + WooCommerce, Direction C "Friendly Systematic" design system.
Author: HyperGraphik Design Inc.
Template: twentytwentyfour
Version: 1.0.0
Text Domain: teacha
*/

/* ==========================================================================
   Teacha — Direction C "Friendly Systematic" design tokens
   ========================================================================== */

:root {
  /* Base */
  --teacha-bg: #F7F8FA;
  --teacha-card: #FFFFFF;
  --teacha-ink: #1E2230;
  --teacha-ink-soft: #6E7585;
  --teacha-line: #E4E7ED;

  /* Primary accent */
  --teacha-blue: #6C8AE4;
  --teacha-blue-soft: #E8EDFB;

  /* Category tag colors */
  --teacha-tag-design: #B98AA8;
  --teacha-tag-design-soft: #F7E9F1;
  --teacha-tag-web: #6C8AE4;
  --teacha-tag-web-soft: #E8EDFB;
  --teacha-tag-compliance: #D9A441;
  --teacha-tag-compliance-soft: #FBF1DC;
  --teacha-tag-health: #6FAE8E;
  --teacha-tag-health-soft: #E6F4ED;
  --teacha-tag-soft: #F2A07B;
  --teacha-tag-soft-soft: #FDEDE3;

  /* Layout */
  --teacha-radius: 14px;
  --teacha-radius-sm: 10px;
  --teacha-shadow: 0 4px 18px rgba(30,34,48,0.05);
  --teacha-shadow-hover: 0 10px 30px rgba(30,34,48,0.09);

  /* Typography */
  --teacha-font-body: 'Inter', sans-serif;
  --teacha-font-display: 'Sora', sans-serif;
}

/* ==========================================================================
   Global base
   ========================================================================== */

body {
  background-color: var(--teacha-bg);
  color: var(--teacha-ink);
  font-family: var(--teacha-font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--teacha-font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--teacha-ink);
}

a {
  color: var(--teacha-blue);
}

/* Visible keyboard focus — accessibility baseline */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--teacha-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   Site header / nav
   ========================================================================== */

.wp-block-template-part.site-header,
header.wp-block-group {
  background: var(--teacha-card);
  border-bottom: 1px solid var(--teacha-line);
}

.teacha-logo {
  font-family: var(--teacha-font-display);
  font-weight: 800;
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.teacha-logo-mark {
  width: 32px;
  height: 32px;
  border-radius: var(--teacha-radius-sm);
  background: var(--teacha-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
}

.teacha-nav-cta {
  background: var(--teacha-blue) !important;
  color: #fff !important;
  padding: 10px 22px;
  border-radius: var(--teacha-radius-sm);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
}

.teacha-nav-cta:hover {
  background: #5A78D2 !important;
}

/* ==========================================================================
   Generic card / surface primitives (used by gating plugin + theme templates)
   ========================================================================== */

.teacha-card {
  background: var(--teacha-card);
  border: 1px solid var(--teacha-line);
  border-radius: var(--teacha-radius);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.teacha-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--teacha-shadow-hover);
  border-color: transparent;
}

.teacha-btn-primary {
  background: var(--teacha-ink);
  color: #fff;
  padding: 14px 28px;
  border-radius: var(--teacha-radius-sm);
  font-weight: 700;
  font-size: 0.97rem;
  border: none;
  cursor: pointer;
  transition: background .15s ease;
  display: inline-block;
  text-decoration: none;
}

.teacha-btn-primary:hover {
  background: #34394B;
  color: #fff;
}

.teacha-btn-secondary {
  background: var(--teacha-bg);
  color: var(--teacha-ink);
  padding: 14px 28px;
  border-radius: var(--teacha-radius-sm);
  font-weight: 700;
  font-size: 0.97rem;
  border: 1px solid var(--teacha-line);
  transition: border-color .15s ease;
  display: inline-block;
  text-decoration: none;
}

.teacha-btn-secondary:hover {
  border-color: var(--teacha-blue);
}

/* ==========================================================================
   Category tag chip system
   ========================================================================== */

.teacha-tag {
  display: inline-flex;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 6px;
}

.teacha-tag--design   { color: var(--teacha-tag-design);     background: var(--teacha-tag-design-soft); }
.teacha-tag--web      { color: var(--teacha-tag-web);        background: var(--teacha-tag-web-soft); }
.teacha-tag--compliance { color: var(--teacha-tag-compliance); background: var(--teacha-tag-compliance-soft); }
.teacha-tag--health   { color: var(--teacha-tag-health);     background: var(--teacha-tag-health-soft); }
.teacha-tag--soft     { color: var(--teacha-tag-soft);       background: var(--teacha-tag-soft-soft); }

/* Pill variant (overlay on thumbnails) */
.teacha-tag-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(30,34,48,0.08);
  border-radius: 99px;
}

/* ==========================================================================
   Course catalog cards (Tutor LMS course archive override)
   ========================================================================== */

.teacha-course-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.teacha-course-thumb {
  height: 148px;
  position: relative;
  overflow: hidden;
  background: var(--teacha-bg);
}

.teacha-course-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.teacha-course-thumb-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--teacha-font-display);
  font-weight: 800;
  font-size: 2.4rem;
  color: #fff;
}

.teacha-course-body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.teacha-course-meta {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--teacha-ink-soft);
  padding-top: 8px;
}

.teacha-course-price {
  font-weight: 800;
  color: var(--teacha-ink);
}

.teacha-course-price--free {
  color: var(--teacha-tag-health);
}

.teacha-course-price--enrolled {
  color: var(--teacha-blue);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 600px) {
  .teacha-nav a:not(.teacha-nav-cta) {
    display: none;
  }
}