/*
 * SEO fixes (heading structure + image dimensions) - Learneva, Nov 2026.
 *
 * Some headings were changed to a different level (or to plain text) so every page has
 * one <h1> first, followed by <h2>s in order. The rules below copy the original styles to
 * the new elements so the pages look exactly as before.
 * Loaded after style.css / responsive.css / custom.css (see includes_top.php).
 */

/* Images now carry width/height attributes (prevents layout shift / CLS).
   :where() has zero specificity, so any existing theme rule that sets a height still wins. */
:where(img[width][height]) {
    height: auto;
}
/* Images whose width/height were added automatically (data-seo-size, see Seo_output_filter.php):
   keep the browser's original sizing. The attributes still give the aspect ratio, but rules like
   "max-height: 40px" (footer logo) must shrink the width proportionally, exactly as before. */
:where(img[data-seo-size]) {
    width: auto;
}

/* Blog details: banner tagline above the article (was <h2>, now <p>). */
.courses .seo-section-title {
    padding-top: 60px;
    font-size: 32px;
    font-weight: 700;
    color: var(--color-1);
    margin-bottom: 30px;
    line-height: 1.2;
}
.courses .seo-section-title span {
    position: relative;
}
.courses .seo-section-title span::before {
    content: "";
    background-image: url("../image/h-1-bn-shape-2.png");
    width: 116px;
    height: 21px;
    position: absolute;
    background-size: 119px;
    top: 31px;
    left: 89px;
}

/* Blog details: author name under the title (was <h6>). */
.blog-body .top .profile-img a .seo-author {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-1);
    margin: 4px 20px 12px 0px;
    line-height: 1.2;
}

/* Blog details: "Tags:" label (was <h3>, now <p>). */
.blog-body .left-tag .seo-tags-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-1);
    font-family: 'Poppins', sans-serif;
    margin: 8px 0px;
    line-height: 1.2;
}

/* Blog lists: category label on cards (was <h3>, now <p>). */
.courses-card .courses-card-body .courses-card-image .courses-card-image-text .seo-card-cat {
    color: #f25c88;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}

/* Blog lists: post title on cards (was <h5>, now <h2>/<h3>). Reset the generic ".courses h2" section-title style. */
.courses .courses-card .courses-card-body .courses-text .seo-card-title {
    font-size: 15px;
    line-height: 25px;
    font-weight: 600;
    padding: 0 7px 0 0;
    margin: 0 0 6px 0;
    transition: .5s;
    color: var(--color-1);
}
.courses .courses-card-body:hover .courses-text .seo-card-title {
    color: #185079;
}

/* Blog details: "Leave a Comment" heading (was <h2>, now <h3>). */
.instructor-student-feed-back h3.seo-feedback-title {
    font-size: 22px;
    padding-top: 60px;
    font-weight: 600;
    color: var(--color-1);
    position: relative;
    display: inline-block;
    margin-bottom: 35px;
}
.instructor-student-feed-back h3.seo-feedback-title:after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    background-color: var(--color-4);
    bottom: -6px;
    left: 0;
    transition: .5s;
}
.instructor-student-feed-back h3.seo-feedback-title:hover::after {
    width: 100%;
}

/* Blog categories: category names in the list (was <h6>, now <h2>). Reset the generic ".courses h2" style. */
.courses .list-group-item .seo-category-title {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    padding-top: 0;
    color: inherit;
}

/* Courses page sidebar filter titles (were <h3>; now <p> - they label form controls, not page sections). */
.course-category .seo-filter-title {
    font-size: 18px;
    font-weight: 600;
    position: relative;
    display: inline-block;
    color: #1e293c;
    line-height: 1.2;
    margin: 0;
}
.course-category .seo-filter-title::after {
    content: "";
    background-color: #185079;
    height: 2px;
    width: 50%;
    position: absolute;
    left: 0;
    bottom: -5px;
    transition: .5s;
}
.course-category .seo-filter-title:hover:after {
    width: 100%;
}
[dir="rtl"] .course-category .seo-filter-title::after {
    left: auto;
    right: 0;
}

/* Courses page: "Showing X of Y results" (was <p>, now the page's first <h2>). Undo generic h2 / ".courses h2" styles. */
.list-card-control h2.seo-results-count,
.courses .list-card-control h2.seo-results-count {
    font-size: 14px;
    font-weight: 400;
    line-height: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    font-family: inherit;
}

/* Course page: "Course description", "What will I learn?" ... (was <h3>, now <h2>). */
.course-description h2.description-head {
    font-size: 22px;
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #000;
}

/* Contact page main heading (was <h3>, now <h2>). */
.contact-page .contact-heading h2 {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 30px;
}

/* FAQ page: small "FAQS" label above "Looking for answers?" (was <h4>, now <p>). */
.faq .faq-accrodion .faq-acc-heading .seo-eyebrow {
    font-size: 18px;
    font-weight: 500;
    color: #185079;
    margin-bottom: 16px;
    line-height: 1.2;
}

/* Instructor page: name next to the photo (was <h4>; the page <h1> now carries the name). */
.instructor-1 .instructor-about .pro-heading .name .seo-instructor-name {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-1);
    line-height: 1.2;
}
/* Instructor page: "Ratings" label (was <h4>, now <p>). */
.instructor-1 .instructor-about .rating .seo-rating-label {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
/* Instructor page: "About" / "Professional Skills" (was <h3>, now <h2>). */
.instructor-1 .instructor-about .about-text h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}
/* Instructor page: "Statistics" (was <h3>, now <h2>). */
.instructor-1 .instructor-about .skill h2.seo-skill-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
    color: inherit;
}
/* Instructor page: statistic numbers (were <h2>, now <p>) and labels (were <h4>, now <p>). */
.instructor-1 .instructor-about .skill .skill-point .skill-point-1 .seo-stat-number {
    font-size: 54px;
    font-weight: 700;
    color: var(--color-4);
    line-height: 1.2;
}
.instructor-1 .instructor-about .skill .skill-point .skill-point-1 .seo-stat-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-1);
    line-height: 1.2;
}
@media all and (max-width: 420px) {
    .instructor .instructor-about .skill .skill-point .skill-point-1 .seo-stat-number {
        font-size: 40px;
    }
}

/* Blog list pages: line under the H1 (was <p>, now the page's <h2>). Undo the ".courses h2" section-title style. */
.courses .container > h2.seo-subtitle {
    padding-top: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: inherit;
    margin-bottom: 50px;
    font-family: inherit;
}

/* ---------------------------------------------------------------------------------------------
 * Login / sign-up / forgot-password pages (now indexable).
 * Title was <h3>, field labels and the "Or" divider were <h5>: same look, proper semantics.
 * --------------------------------------------------------------------------------------------- */
.sing-up-right h1.seo-auth-title {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.2;
    color: rgb(103, 108, 125);
}
.sing-up-right h1.seo-auth-title span {
    color: #185079;
}
.sing-up-right .seo-field-label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--bs-heading-color, inherit);
}
.sing-up-right .another .seo-or {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--bs-heading-color, inherit);
}
.sing-up-right .another .seo-or::after,
.sing-up-right .another .seo-or::before {
    content: "";
    position: absolute;
    width: 45%;
    height: 1.5px;
    background-color: #6e798a72;
    top: 50%;
}
.sing-up-right .another .seo-or::after { left: 0; }
.sing-up-right .another .seo-or::before { right: 0; }

/* Information section under the auth forms. */
.seo-auth-info {
    margin-top: 56px;
    padding: 32px 36px;
    border-radius: 14px;
    background-color: #6e798a12;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.7;
}
.seo-auth-info h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-1, #1e293b);
    margin: 0 0 14px;
    line-height: 1.3;
}
.seo-auth-info p {
    margin: 0 0 16px;
}
.seo-auth-info p:last-child {
    margin-bottom: 0;
}
.seo-auth-info ul {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
}
.seo-auth-info li {
    position: relative;
    padding-left: 22px;
}
.seo-auth-info li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #185079;
}
.seo-auth-info li strong {
    display: block;
    color: var(--color-1, #1e293b);
    font-weight: 600;
}
@media (max-width: 767px) {
    .seo-auth-info { padding: 24px 20px; margin-top: 40px; }
    .seo-auth-info ul { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------------------------
 * One main <h2> per page (SEO audit: "multiple H2"). Secondary section headings are now <h3>
 * (or plain <div> for prices / rating numbers). The rules below keep the original h2 look.
 * --------------------------------------------------------------------------------------------- */

/* Accordion headers (course FAQ, course curriculum, website FAQ): keep h2 typography. */
h3.accordion-header {
    font-size: calc(1.325rem + .9vw);
}
@media (min-width: 1200px) {
    h3.accordion-header { font-size: 2rem; }
}
@media (max-width: 420px) {
    /* responsive.css styles ".tab-content h3" smaller on phones; the old h2 was not affected. */
    .tab-content h3.accordion-header {
        font-size: calc(1.325rem + .9vw);
        margin: 20px 0; /* ".mx-2" (curriculum) still wins with !important, as before */
    }
    .tab-content h3.description-head {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Section titles that used the theme's ".courses h2" style: "Related courses", "Popular blogs",
   and the blog comments heading when the post already has its own <h2>. */
.courses .container > h3.seo-was-h2,
.courses h3.seo-comments-heading {
    padding-top: 60px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-1);
    margin-bottom: 30px;
}
.courses .container > h3.seo-was-h2 span {
    position: relative;
}
.courses .container > h3.seo-was-h2 span::before {
    content: "";
    background-image: url("../image/h-1-bn-shape-2.png");
    width: 116px;
    height: 21px;
    position: absolute;
    background-size: 119px;
    top: 31px;
    left: 89px;
}

/* Course page: instructor name (was <h2>). */
.instructor .instructor-text h3.seo-was-h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}
@media (max-width: 420px) {
    .tab-content .instructor-text h3.seo-was-h2 { font-size: 18px; margin: 0; }
}

/* Course page sidebar: price (was <h2>) and old struck-through price (was <h3>) - not headings. */
.course-right-section .course-card .ammount .seo-price {
    font-size: 34px;
    line-height: 1.2;
    color: var(--color-1);
}
.course-right-section .course-card .ammount .seo-price-old {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    color: #647996;
    padding: 10px;
}

/* Course reviews: "Write a Review" (was <h2>) and each review's rating number (was <h2>). */
.reviews h3.ritt.seo-was-h2 {
    text-align: center;
    color: var(--color-1);
    line-height: 1.2;
}
.reviews .seo-rating-number {
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--color-1);
}