/* ── LINGOCARE COMPONENTS — Phase 30 verified ──────────────── */

/* ── CTA Button (primary pill) ────────────────────────────────
   Verified: #ED7D00, border-radius 300px, 15px 30px, Sora 500 18px */
.lc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--lc-btn-padding);     /* 15px 30px */
  background: var(--lc-btn-bg);       /* #ED7D00 */
  color: var(--lc-text-inverse);      /* #FFFFFF */
  font: var(--lc-btn-font);           /* Sora 500 18px */
  text-decoration: none;
  border: none;
  border-radius: var(--lc-btn-radius); /* 300px */
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.15s ease;
}
.lc-btn:hover, .lc-btn:focus-visible {
  background: var(--lc-brand-dark);   /* #5F3200 */
  color: var(--lc-text-inverse);
}
.lc-btn:active { transform: scale(0.98); }

/* Secondary button: orange text, transparent bg */
.lc-btn--secondary {
  background: transparent;
  color: var(--lc-brand-primary);
  padding: 0;
  font-weight: 500;
  border-radius: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  transition: color 0.2s;
}
.lc-btn--secondary:hover { color: var(--lc-brand-dark); background: transparent; }

/* Outline button (white + orange text — used in pre-footer / on gradients) */
.lc-btn--outline {
  background: var(--lc-surface);
  color: var(--lc-brand-primary);
  border: 2px solid var(--lc-surface);
}
.lc-btn--outline:hover {
  background: transparent;
  color: var(--lc-surface);
}

/* Mobile: full-width */
@media (max-width: 768px) {
  .lc-btn--full-mobile {
    width: 100%;
    justify-content: center;
  }
}

/* ── Eyebrow label ─────────────────────────────────────────── */
.lc-eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--lc-text-muted);   /* #706F6E */
  display: block;
  margin-block-end: 0.75rem;
  letter-spacing: 0.02em;
}
.lc-eyebrow--dark { color: var(--lc-text-dark); }

/* ── Hero section ─────────────────────────────────────────── */
.lc-hero { position: relative; }

.lc-hero__image img {
  width: 100%;
  height: auto;
  border-radius: 1.25rem;  /* Rounded corners on hero image */
  display: block;
}

/* ── Stats counter ─────────────────────────────────────────── */
.lc-counter-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}
.lc-counter__number {
  display: block;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  color: var(--lc-brand-primary);  /* #ED7D00 */
  line-height: 1;
}
.lc-counter__label {
  font-size: 16px;
  color: var(--lc-text-muted);
}
@media (max-width: 768px) {
  .lc-counter-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── Feature card (gray bg, 2-col) ─────────────────────────── */
.lc-feature-card {
  background: var(--lc-surface-gray);  /* #F5F5F5 */
  border-radius: 1rem;
  padding: 2rem;
}
.lc-feature-card__heading {
  font-size: clamp(1.25rem, 2.5vw, 2.25rem);  /* ~36px */
  font-weight: 500;
  color: var(--lc-text-base);
  margin-block: 0 0.75rem;
}
.lc-feature-card__body {
  font-size: 16px;
  color: var(--lc-text-base);
  margin: 0;
}

/* ── TELC location tab pills ─────────────────────────────────
   Verified: 3 pill tabs, selected=orange border, unselected=gray */
.lc-tabs { width: 100%; }
.lc-tabs__list {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin-block-end: 2rem;
  justify-content: center;
}
.lc-tabs__tab {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--lc-text-mid);  /* gray border — unselected */
  border-radius: 999px;
  background: var(--lc-surface);
  color: var(--lc-text-base);
  font-family: var(--lc-font);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: border-color 0.2s, color 0.2s;
}
.lc-tabs__tab[aria-selected="true"] {
  border-color: var(--lc-brand-primary);  /* orange — selected */
  color: var(--lc-brand-primary);
  font-weight: 500;
}
.lc-tabs__tab:hover {
  border-color: var(--lc-brand-primary);
}
.lc-tabs__panel[hidden] { display: none; }

/* ── TELC exam card ─────────────────────────────────────────── */
.lc-exam-card {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--lc-surface-gray);
}
.lc-exam-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  margin-block-end: 0.75rem;
}
.lc-exam-badge--present {
  background: var(--lc-brand-primary);
  color: var(--lc-text-inverse);
}
.lc-exam-badge--digital {
  background: var(--lc-surface-cool);  /* #DEF8FB — blue tint */
  color: var(--lc-text-base);
}
.lc-exam-card__level {
  font-size: 32px;
  font-weight: 400;
  color: var(--lc-text-base);
  margin-block: 0 0.5rem;
}
.lc-exam-card__desc {
  font-size: 16px;
  color: var(--lc-text-mid);   /* #4C4B49 */
  margin-block-end: 1rem;
}
.lc-exam-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lc-exam-card__meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 14px;
  color: var(--lc-text-base);
}
.lc-exam-card__meta-item svg,
.lc-exam-card__meta-item img {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── TELC calendar card ─────────────────────────────────────── */
.lc-cal-card {
  border: var(--lc-card-border);     /* 1px solid #ECECEC */
  border-radius: var(--lc-card-radius); /* 20px */
  padding: var(--lc-card-padding);      /* 28px 32px */
  background: var(--lc-surface);
}
.lc-cal-step-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--lc-text-base);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
  margin-block-end: 0.5rem;
}
/* Day circle */
.lc-cal-day {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
}
.lc-cal-day--available  { background: var(--lc-telc-available-bg); color: var(--lc-telc-available-text); }
.lc-cal-day--fast       { background: var(--lc-telc-fast-bg);      color: var(--lc-telc-fast-text); }
.lc-cal-day--full       { background: var(--lc-telc-full-bg);      color: var(--lc-telc-full-text); }
.lc-cal-day--selected   { background: var(--lc-telc-selected-bg);  color: var(--lc-telc-selected-text); }
/* Nav arrow */
.lc-cal-nav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--lc-surface-gray);  /* #F5F5F5 */
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.lc-cal-nav-btn:hover { background: #e0e0e0; }

/* ── Accordion (FSP sections) ────────────────────────────────
   Heading: DM Sans 400 normal 44px */
.lc-accordion { border-bottom: 1px solid var(--lc-surface-gray); }
.lc-accordion summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.25rem;
  gap: 1rem;
}
.lc-accordion summary::-webkit-details-marker { display: none; }
.lc-accordion summary h2,
.lc-accordion summary h3 {
  font-family: var(--lc-font-accent);   /* DM Sans */
  font-size: clamp(1.5rem, 3vw, 2.75rem);  /* ~44px */
  font-weight: 400;
  font-style: normal;                    /* NOT italic */
  color: var(--lc-text-base);
  margin: 0;
}
.lc-accordion__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
details[open] .lc-accordion__icon--plus  { display: none; }
details:not([open]) .lc-accordion__icon--minus { display: none; }
.lc-accordion__content {
  padding-block: 0 1.5rem;
  padding-left: 0;
}

/* ── Blog card (dark-themed) ──────────────────────────────── */
.lc-blog-card {
  background: #1a1a2e;   /* Dark navy — approximate from screenshot */
  border-radius: 1rem;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: transform 0.2s;
}
.lc-blog-card:hover { transform: translateY(-2px); }
.lc-blog-card__image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.lc-blog-card__category {
  font-size: 12px;
  font-weight: 600;
  color: var(--lc-brand-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  padding: 1rem 1.25rem 0.25rem;
}
.lc-blog-card__title {
  font-size: 1rem;
  font-weight: 500;
  color: #FFFFFF;
  padding: 0 1.25rem 1rem;
  margin: 0;
}
.lc-blog-card__read {
  color: var(--lc-brand-primary);
  font-size: 14px;
  padding: 0 1.25rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* ── Pre-footer CTA section (orange gradient) ─────────────── */
.lc-prefooter {
  background: linear-gradient(135deg, var(--lc-brand-warm) 0%, var(--lc-brand-primary) 50%, #e8540a 100%);
  padding: 4rem 2rem;
  text-align: center;
  border-radius: 1rem;
  margin: 2rem auto;
  max-width: calc(var(--lc-container) - 4rem);
}
.lc-prefooter__heading {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  color: var(--lc-text-inverse);
  margin-block-end: 1.5rem;
}
.lc-prefooter .lc-btn--outline {
  background: var(--lc-surface);
  color: var(--lc-brand-primary);
  border: 2px solid var(--lc-surface);
  font-size: 16px;
  padding: 12px 28px;
}

/* ── LingocareJobs empty state ───────────────────────────── */
.lc-jobs-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--lc-text-muted);
  font-size: 15px;
  background: var(--lc-surface);
  border: 1px solid #EEEDEC;
  border-radius: 16px;
  font-family: var(--lc-font);
}

/* ── Notices ─────────────────────────────────────────────── */
.lc-notice {
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 15px;
  margin-block: 1rem;
}
.lc-notice--info    { background: var(--lc-surface-cool); color: var(--lc-text-base); }
.lc-notice--success { background: var(--lc-savings-bg);  color: var(--lc-savings-text); }
.lc-notice--error   { background: #fee2e2; color: #dc2626; }