/*
Theme Name: English Challenges
Theme URI: https://englishchallenges.com
Author: English Challenges
Description: Dark theme for English Challenges platform.
Version: 1.0.0
Text Domain: english-challenges
*/

:root {
  --bg:      #1B1B1D;
  --bg2:     #242426;
  --bg3:     #2e2e31;
  --bg4:     #3a3a3e;
  --white:   #F3F3F0;
  --muted:   #9a9a9a;
  --orange:  #F58220;
  --green:   #50C878;
  --gold:    #F5C518;
  --border:  rgba(255,255,255,0.08);
  --radius:  12px;
  --max:     1280px;
  --nav-h:   68px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: #1B1B1D;
  color: #F3F3F0;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: #F58220; text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .8; }

h1,h2,h3,h4,h5,h6 {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1;
  color: #F3F3F0;
}

p { margin-bottom: 1em; color: #9a9a9a; line-height: 1.7; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.5em; color: #9a9a9a; }
li { margin-bottom: .4em; }
strong { color: #F3F3F0; font-weight: 600; }
blockquote { border-left: 3px solid #F58220; padding: 14px 20px; background: #242426; border-radius: 0 8px 8px 0; margin: 24px 0; font-style: italic; color: #9a9a9a; }
hr { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 40px 0; }

.ec-container    { max-width: 1280px; margin: 0 auto; padding: 0 40px; }
.ec-container-sm { max-width: 860px; margin: 0 auto; padding: 0 40px; }
.ec-section      { padding: 96px 40px; }
.ec-section-sm   { padding: 64px 40px; }

.ec-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: #F58220; margin-bottom: 12px; display: block;
}

.ec-section-title {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 900; text-transform: uppercase;
  line-height: 1; color: #F3F3F0;
  margin-bottom: 16px;
}
.ec-section-title em { font-style: normal; color: #F58220; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px; border-radius: 8px; border: none;
  font-family: 'Barlow', sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
  cursor: pointer; transition: opacity .2s, transform .15s;
  text-decoration: none;
}
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn-primary { background: #F58220; color: #fff; }
.btn-ghost   { background: transparent; border: 1px solid rgba(255,255,255,.2); color: #F3F3F0; }
.btn-ghost:hover { border-color: rgba(255,255,255,.45); opacity: 1; }
.btn-green   { background: #50C878; color: #fff; }
.btn-sm      { padding: 8px 18px; font-size: 13px; }
.btn-lg      { padding: 15px 32px; font-size: 16px; }
.btn-block   { width: 100%; justify-content: center; }

.ec-card {
  background: #242426;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 28px;
  transition: border-color .25s, transform .2s;
}
.ec-card:hover { border-color: rgba(245,130,32,.3); transform: translateY(-2px); }

input[type="text"], input[type="email"], input[type="password"],
input[type="search"], textarea, select {
  width: 100%; padding: 11px 14px;
  background: #2e2e31; border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; color: #F3F3F0; font-family: 'Barlow', sans-serif;
  font-size: 15px; outline: none; transition: border-color .2s;
}
input:focus, textarea:focus, select:focus { border-color: #F58220; }
input::placeholder, textarea::placeholder { color: rgba(154,154,154,.5); }
textarea { resize: vertical; min-height: 100px; }
label { display: block; font-size: 13px; font-weight: 600; color: #9a9a9a; margin-bottom: 6px; }

.alignleft   { float: left; margin: 0 24px 16px 0; }
.alignright  { float: right; margin: 0 0 16px 24px; }
.aligncenter { text-align: center; margin: 16px auto; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1B1B1D; }
::-webkit-scrollbar-thumb { background: #3a3a3e; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #F58220; }

@media (max-width: 768px) {
  .ec-container, .ec-container-sm { padding: 0 20px; }
  .ec-section    { padding: 64px 20px; }
  .ec-section-sm { padding: 48px 20px; }
}