/* ==========================================================================
   Xlearnic design system for the LMS frontend
   ==========================================================================

   xlearnic-brand.css made the COLOURS match the Next.js site. This file makes
   the DESIGN LANGUAGE match: type scale and weight, spacing rhythm, card shape,
   border and shadow treatment, button and input shape.

   Every number is read from xlearnic-nextjs (src/app/globals.css and the section
   components), not invented:

     container      max-w-7xl            1280px   (vendor: 1180px)
     section pad    py-12 md:py-20       48/80px
     heading        font-black 900, tracking-tight -0.025em, brand navy
     h1             text-4xl→6xl         36/48/60px
     h2             text-3xl→5xl         30/36/48px
     body           text-base md:text-lg 16/18px, leading-relaxed 1.625
     card           rounded-2xl          16px, 1px border, shadow-card
     card hover     -translate-y-1       -4px, shadow-hover
     button         rounded-xl           12px, font-bold
     input          rounded-xl           12px, focus ring 3px @ 15%

   Loaded after xlearnic-brand.css. Removing the <link> reverts the design pass
   and leaves the colours in place, so the two are independent.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Poppins 800/900
   --------------------------------------------------------------------------
   The Next.js headings are font-black (900). style.css:9 imports Poppins at
   400-700 only, so a 900 heading silently rendered at 700 and the type never
   looked like the other site. This adds the two missing weights.
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@800;900&display=swap");

:root {
    /* Type scale.
       px, NOT rem: style.css:64 sets html{font-size:62.5%}, so 1rem is 10px here
       and a rem scale silently renders at 62.5% — which is exactly what happened
       on the first attempt and what a screenshot caught. */
    --xd-h1: clamp(36px, 24px + 2.6vw, 60px);
    --xd-h2: clamp(30px, 22px + 1.9vw, 48px);
    --xd-h3: clamp(24px, 19px + 1.1vw, 36px);
    --xd-h4: clamp(20px, 18px + 0.5vw, 24px);
    --xd-body: clamp(16px, 15.4px + 0.18vw, 18px);
    --xd-card-title: clamp(17px, 16px + 0.3vw, 19px);

    --xd-tracking-tight: -0.025em;
    --xd-leading-tight: 1.15;
    --xd-leading-relaxed: 1.625;

    /* Spacing rhythm */
    --xd-section-y: clamp(48px, 32px + 3.5vw, 80px);    /* py-12 -> py-20 */
    --xd-gutter: clamp(16px, 12px + 1vw, 24px);         /* px-4  -> px-6  */
    --xd-container: 1280px;                             /* max-w-7xl */

    /* Shape */
    --xd-radius-card: 16px;   /* rounded-2xl */
    --xd-radius-btn: 12px;    /* rounded-xl  */
    --xd-radius-input: 12px;
    --xd-radius-pill: 999px;
}

/* ==========================================================================
   Container — the Next.js site is 100px wider, which changes the whole rhythm
   ========================================================================== */

.container,
.container-fluid.px-custom {
    max-width: var(--xd-container);
    padding-left: var(--xd-gutter);
    padding-right: var(--xd-gutter);
}

/* ==========================================================================
   Typography
   ========================================================================== */

body {
    font-size: var(--xd-body);
    line-height: var(--xd-leading-relaxed);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.title, .title-1, .title-5,
.section-title h2,
.entry-title h3 {
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
    font-weight: 900;
    letter-spacing: var(--xd-tracking-tight);
    line-height: var(--xd-leading-tight);
    color: var(--x-heading, #0b1736);
}

h1, .banner-content h1 {
    font-size: var(--xd-h1);
}

h2, .section-title h2, .title {
    font-size: var(--xd-h2);
}

h3 {
    font-size: var(--xd-h3);
    font-weight: 800;
}

h4, h5 {
    font-size: var(--xd-h4);
    font-weight: 700;
}

/* Card titles.
   A card heading is not a section heading: the first version let the h3/h4 rules
   above claim .entry-title h3 and the category/blog h4s, so course titles jumped
   to 24-36px and wrapped onto three lines — a full-page screenshot caught it.
   Next.js cards are text-base md:text-lg font-bold; the vendor's own was 20px. */
.entry-title h3,
.entry-title h4,
.c-card .entry-title h3,
.cate-content h4,
.blog-content h4,
.single-course h4,
.course-item h4,
.single-blog h4,
.single-category h4,
.single-instructor h4 {
    font-size: var(--xd-card-title);
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* Price/meta chips inside a card image are h4 in the vendor markup; they must
   not inherit a title size. */
.c-card .course-price h4,
.course-price h4,
.price-tag h4 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

/* Lead paragraph under a hero or section heading */
.banner-content p,
.section-title p,
.sec-title p {
    font-size: var(--xd-body);
    line-height: var(--xd-leading-relaxed);
    max-width: 576px; /* max-w-xl */
}

/* The eyebrow line above a heading ("The Leader in online learning") */
.banner-content h5,
.title-head {
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--x-blue-deep, #0b5ad6);
    line-height: 1.4;
}

/* ==========================================================================
   Section rhythm
   ========================================================================== */

.banner-wraper,
.course-area,
.category-area,
.feature-area,
.about-area,
.testimonial-area,
.blog-area,
.counter-area,
.instructor-area,
.cta-area,
.faq-area,
.pricing-area {
    padding-top: var(--xd-section-y);
    padding-bottom: var(--xd-section-y);
}

/* The vendor adds its own top margins on top of section padding
   (.banner-wraper margin-top:40px, .banner-btn margin-top:50px,
   .banner-image margin-top:54px), which compounded into a very tall hero once
   this file added padding. We own the rhythm now, so those are folded in. */
.banner-wraper {
    margin-top: 0;
}

.banner-wraper .banner-image {
    margin-top: 0;
}

.banner-btn {
    margin-top: 32px;
}

/* The vendor heading blocks sit tight against their grid; the Next.js sections
   give them room and centre the lead copy. */
.section-title,
.sec-title {
    margin-bottom: clamp(32px, 24px + 2vw, 56px);
}

/* ==========================================================================
   Cards — the single biggest shape difference
   --------------------------------------------------------------------------
   Vendor cards are square-ish with a heavy diffuse shadow. The Next.js card is
   a 16px radius, a hairline border, a soft shadow, and a 4px lift on hover.
   ========================================================================== */

.single-feature,
.c-card,
.b-card,
.single-opinion,
.single-course,
.course-item,
.single-blog,
.blog-card,
.single-category,
.category-card,
.single-instructor,
.instructor-card,
.ol-card,
.single-motion {
    border-radius: var(--xd-radius-card);
    border: 1px solid var(--x-border, hsl(215 22% 88%));
    box-shadow: var(--x-shadow-card, 0 4px 24px -4px hsl(222 66% 13% / 0.1));
    background-color: var(--x-surface, #fff);
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
}

.single-feature:hover,
.c-card:hover,
.b-card:hover,
.single-course:hover,
.course-item:hover,
.single-blog:hover,
.blog-card:hover,
.single-category:hover,
.category-card:hover,
.single-instructor:hover,
.instructor-card:hover,
.single-motion:hover {
    transform: translateY(-4px);
    box-shadow: var(--x-shadow-hover, 0 12px 40px -8px hsl(222 66% 13% / 0.16));
    border-color: var(--x-blue-light, #4a9bff);
}

/* Media inside a card should follow the card's corner, not overflow it. */
.single-feature img,
.c-card img,
.single-course img,
.course-item img,
.single-blog img,
.blog-card img {
    border-radius: 0;
}

/* ==========================================================================
   Buttons
   --------------------------------------------------------------------------
   Vendor: 10px radius, 15px/600. Next.js: 12px radius, bold, a little more
   horizontal padding, and a lift on hover.
   ========================================================================== */

.eBtn,
.btn,
.ol-btn-primary,
.btn-danger-1,
.learn-btn {
    border-radius: var(--xd-radius-btn);
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: box-shadow 0.25s ease, transform 0.25s ease,
        background-position 0.5s ease, background-color 0.25s ease;
}

.eBtn {
    padding: 14px 32px;
}

.eBtn:hover,
.gradient:hover,
.btn-danger-1:hover {
    transform: translateY(-2px);
}

/* The play-circle "Learn More" affordance */
.banner-btn .learn-btn {
    border: 1px solid var(--x-border, hsl(215 22% 88%));
    background-color: var(--x-surface, #fff);
    color: var(--x-heading, #0b1736);
}

.banner-btn .learn-btn:hover {
    border-color: var(--x-blue, #1677ff);
    color: var(--x-blue-deep, #0b5ad6);
}

/* ==========================================================================
   Inputs — 12px radius and the Next.js focus ring
   ========================================================================== */

.form-control,
.ol-form-control,
.nice-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
input[type="number"],
textarea,
select {
    border-radius: var(--xd-radius-input);
    border: 1px solid var(--x-border, hsl(215 22% 88%));
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.ol-form-control:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--x-blue, #1677ff);
    box-shadow: 0 0 0 3px hsl(214 100% 54% / 0.15);
    outline: none;
}

/* Header search, which the vendor styles as a pill */
.gSearch-show,
.search-wrap input {
    border-radius: var(--xd-radius-input);
}

/* ==========================================================================
   Badges, pills and price tags
   ========================================================================== */

.badge,
.course-price,
.price-tag,
.category-count,
.lesson-count {
    border-radius: var(--xd-radius-pill);
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   Footer — the Next.js footer is navy with generous rhythm
   ========================================================================== */

footer,
.footer-area {
    padding-top: var(--xd-section-y);
}

footer h4,
footer h5,
.footer-area h4,
.footer-area h5 {
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   Images — the Next.js site rounds every content image
   ========================================================================== */

.banner-image img,
.about-image img,
.skill-image img {
    border-radius: var(--xd-radius-card);
}

/* ==========================================================================
   Tables and list rows inside the LMS
   ========================================================================== */

.table > :not(caption) > * > * {
    padding: 14px 16px;
}

.table thead th {
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--x-text, #525e78);
}

/* ==========================================================================
   Testimonial slider controls
   --------------------------------------------------------------------------
   Only .owl-next carried the vendor gradient, so the generated sweep recoloured
   it and left .owl-prev on the owl theme's own grey — the two arrows did not
   match. A rendered-pixel sample of the screenshot read the left one at hue 262
   (lavender) against the brand's 214, which is what sent me looking.
   Both are stated here so they stay a pair.
   ========================================================================== */

.user-slider .owl-nav .owl-prev,
.user-slider .owl-nav .owl-next,
.testimonials-wrapper .owl-theme .owl-nav [class*="owl-"] {
    background-image: var(--x-gradient-cta);
    background-color: var(--x-blue-deep);
    background-size: 200% auto;
    color: #fff;
    border: none;
    border-radius: var(--xd-radius-btn);
    width: 44px;
    height: 44px;
    transition: box-shadow 0.25s ease, transform 0.25s ease,
        background-position 0.5s ease;
}

.user-slider .owl-nav .owl-prev:hover,
.user-slider .owl-nav .owl-next:hover,
.testimonials-wrapper .owl-theme .owl-nav [class*="owl-"]:hover {
    background-position: right center;
    background-color: var(--x-blue-deep);
    box-shadow: var(--x-shadow-blue);
    transform: translateY(-2px);
    color: #fff;
}

/* The decorative rings behind this section are PNGs, so CSS cannot recolour
   their pixels — a hue rotation brings the vendor's violet onto the brand hue
   instead. Scoped to those two spans so no content image is touched. */
.testimonials-wrapper .elips img {
    filter: hue-rotate(-48deg) saturate(0.85);
}

/* ==========================================================================
   Vendor declarations that carry !important
   --------------------------------------------------------------------------
   style.css marks 20 off-brand colour declarations !important, so a normal
   declaration cannot beat them no matter where it sits in the cascade. The
   testimonial arrows are the visible case: the override was in the served CSS
   and correct three times over, and the arrows stayed purple anyway. Matching
   !important is the only way to win these, so it is used here and ONLY here.
   Generated from the vendor CSS by the same hue test as the sweep.
   ========================================================================== */

/* vendor !important gradients — 2 rules */
.page-link:hover, .page-item.active .page-link, .entry-pagination .pagination li.active a,
.user-slider .owl-nav .owl-prev, .user-slider .owl-nav .owl-next {
    background-image: var(--x-gradient-cta) !important;
}

/* vendor !important fills — 11 rules */
.bg-pink,
.btn-outline-purple-sm2:active,
.btn-outline-purple-sm:active,
.btn-purple-md:active,
.btn-purple-sm2:active,
.btn-purple-sm3:active,
.fill-heart:hover,
.lms-btn-secondary:active,
.lms-slider-range-wrapper .ui-widget-header,
.lms-sm-btn-outline-secondary:active,
.lms1-sidebar-btn:active {
    background-color: var(--x-blue-deep) !important;
    background-image: none !important;
}

/* vendor !important borders — 6 rules */
.btn-outline-purple-sm2:active,
.btn-outline-purple-sm:active,
.form-checkbox-input:checked,
.lms-slider-range-wrapper .ui-widget-header,
.lms-sm-btn-outline-secondary:active,
.lms1-sidebar-btn:active {
    border-color: var(--x-blue-deep) !important;
}

/* vendor !important text — 1 rules */
.upload-btn:hover {
    color: var(--x-blue-deep) !important;
}

/* ==========================================================================
   Logo rendering
   --------------------------------------------------------------------------
   Two separate bugs, both measured rather than guessed:

   1. The markup puts Bootstrap's .object-fit-cover on the header logo, and that
      utility is `object-fit: cover !important`. On a logo that CROPS: the image
      is forced to fill its box and the edges are cut off. A logo must always be
      `contain` — it is artwork with fixed proportions, not a photo.

   2. The theme sizes the logo by HEIGHT (40px header, 50px sidebar, 40px
      player), which on a 3.33:1 lockup leaves the wordmark at ~15px. Sizing by
      WIDTH with a height cap gives it the whole bar instead.

   CSS could not fix the third problem, so the artwork did. The uploaded SVGs
   are 2000x600 and carry a tagline under the wordmark that occupies 21 of those
   600 units. Measured per surface, that band renders at 1.8-2.2px everywhere the
   logo appears — header, sidebar, player, footer AND invoices — against a ~7px
   floor for legibility. No width or height here can raise 2px to 7px without
   the wordmark overflowing its bar, so assets/brand/xlearnic-logo-{light,dark}
   .svg drop the tagline group and tighten the viewBox to the mark (2000x600 ->
   1453x279), which puts the wordmark at 21px in the same header. Kevin's full
   lockups stay untouched in public/uploads/{light,dark}_logo/ and can be
   re-selected from admin > settings at any time.

   The height caps stay so the logo cannot overflow the bars it sits in.
   ========================================================================== */

/* Never crop a logo, whatever utility class the markup carries. */
.logo-image img,
.header-dark-logo,
.header-light-logo,
.sidebar-logo-lg,
.sidebar-logo-sm,
.course-play-logo img,
.footer-content img,
.footer-logo-area img,
img[alt="system logo"] {
    object-fit: contain !important;
}

/* Header: size by width so the wordmark + tagline stay legible, with a height
   cap so it still fits the bar. */
.logo-image img,
.header-dark-logo,
.header-light-logo {
    width: auto !important;
    max-width: 190px;
    height: auto !important;
    max-height: 52px;
}

/* Admin / instructor sidebar (markup sets height="50px" inline). */
.sidebar-logo-area .sidebar-logo-lg,
.sidebar-logo-lg {
    width: auto;
    max-width: 180px;
    height: auto;
    max-height: 46px;
}

.sidebar-logo-sm {
    width: auto;
    max-width: 40px;
    height: auto;
    max-height: 40px;
}

/* Course player header (markup sets height="40px" inline). */
.course-play-logo img {
    width: auto;
    max-width: 170px;
    height: auto;
    max-height: 44px;
}

/* Footer logo sits on the navy panel and has more room. */
.footer-content img,
.footer-logo-area img {
    width: auto;
    max-width: 210px;
    height: auto;
    max-height: 58px;
}

/* Invoices and certificates print the logo; keep it proportional there too. */
.invoice-logo img,
.invoice-header img {
    object-fit: contain !important;
    width: auto;
    max-width: 200px;
    height: auto;
}