/* Additions to the landing theme for dynamic sections and inner pages
   (blog, videos, English test). Colors follow landing_style.css. */

/* Inner pages: solid header, content starts below it */
.site-header.inner-header { background-color: #000; }
.page-body { padding-top: 130px; padding-bottom: 60px; min-height: 70vh; }
.page-body h1 { font-size: 30px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 25px; }

/* Language switch */
.primary-nav .lang-switch form { display: flex; gap: 4px; align-items: center; height: 100%; }
.primary-nav .lang-switch button { background: none; border: 1px solid transparent; padding: 2px; line-height: 0; cursor: pointer; opacity: .6; }
.primary-nav .lang-switch button.active, .primary-nav .lang-switch button:hover { opacity: 1; border-color: #FFC206; }

/* Login / panel button at the end of the menu */
.site-header .primary-nav .menu-item.login-link > a,
.site-header.small-height .primary-nav .menu-item.login-link > a { min-height: 0; padding: 7px 18px; border: 1px solid #FFC206; color: #FFC206; font-weight: 600; letter-spacing: 1px; transition: background-color .2s ease, color .2s ease; }
.site-header .primary-nav .menu-item.login-link > a:hover { background-color: #FFC206; color: #000; }
.m-menu .login-link > a { color: #FFC206; }

/* Alerts */
.site-alert { padding: 12px 18px; margin-bottom: 20px; border-left: 4px solid; background: #fafafa; }
.site-alert.success { border-color: #3c9d4e; color: #2b6e37; }
.site-alert.error { border-color: #d9534f; color: #a94442; }
.field-error, .validation-summary-errors { color: #d9534f; font-size: 13px; }
.validation-summary-errors ul { padding-left: 18px; margin: 0 0 10px; }
.validation-summary-valid { display: none; }

/* Captcha */
.captcha-box { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0; }
.captcha-box .captcha-img { border: 1px solid #ddd; background: #f3f3f3; height: 50px; width: 160px; }
.captcha-box .captcha-refresh { background: #0C0C0C; color: #fff; border: none; width: 40px; height: 40px; font-size: 18px; cursor: pointer; }
.captcha-box .captcha-code { max-width: 180px; margin: 0 !important; text-transform: uppercase; letter-spacing: 3px; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Client logos */
.client-logo.client-logo-2 { display: flex; justify-content: center; align-items: center; gap: 80px; flex-wrap: wrap; }
.client-logo.client-logo-2 img { max-height: 90px; width: auto; }

/* Team: 4 per row on desktop, 3 on tablets, 2 on phones (col-md-3 col-sm-4 col-xs-6);
   photos keep the same shape at every width instead of a fixed height */
.team-member { margin-left: auto; margin-right: auto; }
.team-member .member-thumb img { height: auto; aspect-ratio: 7 / 9; }
@media screen and (max-width: 767px) {
	.team-member .member-thumb { margin-bottom: 15px; }
}

/* Event cards: date/location and image sizing */
.single-event .event-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Blog */
.post .post-thumbnail img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.blog-list .post { margin-bottom: 40px; }
.blog-article .article-image { width: 100%; max-height: 480px; object-fit: cover; margin-bottom: 25px; }
.blog-article .article-meta { color: #888; font-size: 14px; margin-bottom: 20px; }
.blog-article .article-meta span { margin-right: 18px; }
.blog-article .article-content { font-size: 16px; line-height: 1.7; color: #222; }
.blog-article .article-content img { max-width: 100%; height: auto; }
.blog-article .article-content .ql-align-center { text-align: center; }
.blog-article .article-content .ql-align-right { text-align: right; }
.blog-article .article-content .ql-align-justify { text-align: justify; }
.blog-article .article-content blockquote { border-left: 4px solid #FFC206; padding-left: 15px; color: #555; }
.comments { margin-top: 50px; border-top: 1px solid #eee; padding-top: 30px; }
.comments h3 { font-weight: 900; text-transform: uppercase; font-size: 22px; margin-bottom: 20px; }
.comment-item { padding: 15px 0; border-bottom: 1px solid #f0f0f0; }
.comment-item .comment-author { font-weight: 700; }
.comment-item .comment-date { color: #999; font-size: 12px; margin-left: 10px; }
.comment-item p { margin: 6px 0 0; white-space: pre-line; }
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 20px; }
.pager a, .pager span { padding: 6px 14px; border: 1px solid #ddd; color: #000; }
.pager .current { background: #FFC206; border-color: #FFC206; color: #fff; }
.section-more { text-align: center; margin-top: 10px; }

/* Videos */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 25px; }
.video-card { display: block; color: #000; }
.video-card:hover { color: #000; }
.video-card .video-poster { position: relative; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.video-card .video-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.video-card:hover .video-poster img { transform: scale(1.05); }
.video-card .video-poster .play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 48px; text-shadow: 0 0 12px rgba(0,0,0,.6); }
.video-card h3 { font-size: 16px; font-weight: 700; margin: 10px 0 4px; }
.video-card .video-meta { color: #888; font-size: 13px; }
.video-watch .player-wrap { background: #000; margin-bottom: 20px; }
.video-watch h1 { font-size: 24px; text-transform: none; }
.video-watch .video-description { white-space: pre-line; color: #333; }
.video-side .video-card { display: flex; gap: 10px; margin-bottom: 15px; }
.video-side .video-card .video-poster { flex: 0 0 140px; }
.video-side .video-card .video-poster .play-icon { font-size: 24px; }
.video-side .video-card h3 { margin-top: 0; font-size: 14px; }

/* English test */
.test-intro { background: #fafafa; border-left: 4px solid #FFC206; padding: 15px 20px; margin-bottom: 30px; }
.test-question { padding: 18px 0; border-bottom: 1px solid #eee; }
.test-question .q-text { font-weight: 700; margin-bottom: 10px; }
.test-question .q-num { display: inline-block; min-width: 32px; color: #FFC206; }
.test-question label { display: block; font-weight: 400; cursor: pointer; padding: 4px 0 4px 32px; margin: 0; }
.test-question input[type=radio] { width: auto; margin: 0 8px 0 0; display: inline; }
.test-question.correct { background: #f1faf2; }
.test-question.wrong { background: #fdf3f3; }
.test-question .answer-note { padding-left: 32px; font-size: 14px; }
.test-question .answer-note .ok { color: #2b6e37; }
.test-question .answer-note .bad { color: #a94442; }
.test-result-box { text-align: center; padding: 30px; background: #0C0C0C; color: #fff; margin-bottom: 30px; }
.test-result-box .score { font-size: 54px; font-weight: 900; color: #FFC206; }
.test-result-box .level { font-size: 22px; margin-top: 8px; }