/* CertiGrowBD — Tailwind-based design custom extras (matches approved homepage design) */

body.cgbd-tailwind-body {
    font-family: 'Hind Siliguri', sans-serif;
}

/* Premium border & glow hover effect on certification cards */
.rg-hover-card {
    position: relative;
    background: #ffffff;
    border: 2px solid transparent;
    border-radius: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.rg-hover-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(22, 163, 74, 0.15), 0 10px 10px -5px rgba(220, 38, 38, 0.15);
    background-image: linear-gradient(white, white), linear-gradient(135deg, #16a34a, #dc2626);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

/* Animated underline on nav links */
.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #16a34a;
    transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* Sticky header needs a defined stacking context above WP admin bar if present */
.cgbd-site-header { top: 0; }
body.admin-bar .cgbd-site-header { top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar .cgbd-site-header { top: 46px; }
}

/* Ensure WordPress theme styles don't leak into our Tailwind-built pages */
.cgbd-page-scope ul, .cgbd-page-scope ol { margin: 0; padding: 0; list-style: none; }
.cgbd-page-scope a { text-decoration: none; }
.cgbd-page-scope img { max-width: 100%; height: auto; }

/* ─────────────────────────────────────────────────────────────────────────────
   FULL-WIDTH FIX (no horizontal scrollbar)
   Instead of forcing the plugin blocks to 100vw (which causes a horizontal
   scrollbar and leaves the header background short), we widen the PARENT
   container that the page builder / theme places the shortcode in. The plugin
   blocks then fill it naturally at width:100% — edge to edge, no scrollbar.

   `body.cgbd-fullwidth` is added by the navbar script, so these overrides only
   apply on pages that actually render the plugin.
   ───────────────────────────────────────────────────────────────────────────── */
body.cgbd-fullwidth .elementor-section > .elementor-container,
body.cgbd-fullwidth .elementor-section-boxed > .elementor-container,
body.cgbd-fullwidth .elementor-section,
body.cgbd-fullwidth .elementor-section-boxed,
body.cgbd-fullwidth .elementor-container,
body.cgbd-fullwidth .elementor-column,
body.cgbd-fullwidth .elementor-column-wrap,
body.cgbd-fullwidth .elementor-widget-wrap,
body.cgbd-fullwidth .elementor-widget,
body.cgbd-fullwidth .elementor-widget-shortcode,
body.cgbd-fullwidth .elementor-widget-shortcode .elementor-widget-container,
body.cgbd-fullwidth .e-con,
body.cgbd-fullwidth .e-con-inner,
body.cgbd-fullwidth .e-con-full,
body.cgbd-fullwidth .elementor,
body.cgbd-fullwidth .elementor-element,
body.cgbd-fullwidth .entry-content,
body.cgbd-fullwidth .page-content,
body.cgbd-fullwidth .site-content,
body.cgbd-fullwidth .content-area,
body.cgbd-fullwidth #content,
body.cgbd-fullwidth #primary,
body.cgbd-fullwidth main {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Some builders centre their inner row with flexbox instead of margin:auto —
   neutralise that centring so the (now 100%-wide) row isn't squeezed narrow. */
body.cgbd-fullwidth .elementor-section,
body.cgbd-fullwidth .e-con {
    justify-content: stretch !important;
}

/* The plugin's own top-level blocks simply fill their (now full-width) parent. */
.cgbd-site-header,
.cgbd-page-scope,
.cgbd-site-footer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* Header bar spans full width; its inner row hugs the edges (logo far-left,
   menu + login far-right) with comfortable padding — no centered max-width gap. */
.cgbd-site-header > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}
/* Footer keeps its readable centered max-width container. */
.cgbd-site-footer > div { width: 100%; }

/* Belt-and-braces: never allow a stray horizontal scrollbar from the content. */
.cgbd-page-scope { overflow-x: clip; }

/* ─────────────────────────────────────────────────────────────────────────────
   LOGO SIZE FIX
   Many WordPress themes ship `img { height: auto !important }`, which overrides
   Tailwind's height utilities and blows the logo up to its natural size.
   These rules (plus the inline styles in navbar.php / footer.php) pin the logo
   to a sane height regardless of the active theme.
   ───────────────────────────────────────────────────────────────────────────── */
.cgbd-site-header .cgbd-nav-logo,
.cgbd-site-header a img {
    height: 56px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}
.cgbd-site-footer .cgbd-footer-logo,
.cgbd-site-footer img {
    height: 64px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
}
@media (max-width: 640px) {
    .cgbd-site-header .cgbd-nav-logo,
    .cgbd-site-header a img { height: 44px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAVBAR: keep logo on the far left, push the menu + login button together to
   the far right. Driven by CSS (not Tailwind responsive utilities) so it is
   reliable even if the Tailwind CDN fails to generate a class.
   ───────────────────────────────────────────────────────────────────────────── */
.cgbd-site-header .cgbd-nav-logo-link { margin-right: auto !important; }
@media (min-width: 1024px) {
    .cgbd-site-header .cgbd-nav-desktop { margin-left: auto !important; }
    .cgbd-site-header .cgbd-nav-cta { margin-left: 1.5rem !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   HERO: force the two-column layout (text left, card right) on desktop.
   Self-contained CSS so the card always sits beside the text instead of
   stacking underneath it.
   ───────────────────────────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────────────────────────
   HERO: robust two-column layout (text left, card right) using flexbox so it
   does NOT depend on a media-query breakpoint that the Tailwind CDN may miss.
   The card is capped to a compact size so it fits neatly beside the text.
   ───────────────────────────────────────────────────────────────────────────── */
.cgbd-hero-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2.5rem !important;
    align-items: center !important;
}
.cgbd-hero-col-text {
    flex: 1 1 380px !important;
    min-width: 0 !important;
}
.cgbd-hero-col-visual {
    flex: 0 1 360px !important;
    min-width: 0 !important;
    max-width: 380px !important;   /* smaller card so it fits the right column */
    margin-left: auto !important;
}
.cgbd-hero-card-wrap { width: 100% !important; max-width: 100% !important; }
.cgbd-hero-card { padding: 1.5rem !important; }   /* tighter padding = smaller card */
@media (max-width: 1023px) {
    .cgbd-hero-col-visual { max-width: 420px !important; margin: 0 auto !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER: robust 3-column layout (flex, no fragile breakpoint) and the brand
   logo is centred within its block as requested.
   ───────────────────────────────────────────────────────────────────────────── */
.cgbd-footer-brand { text-align: center !important; }
.cgbd-footer-brand .cgbd-footer-logo {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-block !important;
}
@media (min-width: 768px) {
    .cgbd-footer-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 2rem !important;
    }
    .cgbd-footer-grid > * { flex: 1 1 200px !important; }
}

/* Auth pages (login / register / forgot / reset): keep their logo small. */
.cgbd-page-scope .cgbd-auth-logo-img {
    height: 52px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    display: inline-block !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   EXAM PAGE: take over the full screen so the theme header/footer (and any
   other page chrome) are completely hidden during the exam — regardless of
   which theme or page template is used.
   ───────────────────────────────────────────────────────────────────────────── */
#cgbd-exam-wrap {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
/* Push the exam below the WP admin bar only for logged-in admins previewing it */
body.admin-bar #cgbd-exam-wrap { top: 32px !important; }
@media screen and (max-width: 782px) {
    body.admin-bar #cgbd-exam-wrap { top: 46px !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER VISIBILITY SAFETY NET
   The plugin's footer is always rendered in the markup, but some themes /
   page-builder full-width overrides can collapse or hide it. These rules force
   the plugin footer to stay visible and full-width no matter what.
   ───────────────────────────────────────────────────────────────────────────── */
body .cgbd-site-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 1px !important;
    position: static !important;
    transform: none !important;
    overflow: visible !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   STANDALONE APP PAGES — hide the active THEME's header & footer
   Added via the body.cgbd-standalone class (set by public.js whenever a plugin
   page is rendered) so pages like Dashboard, Classroom and the Exam render
   distraction-free, even when the page template is NOT set to a blank/canvas
   template in WordPress. The plugin's OWN header/footer (.cgbd-site-header /
   .cgbd-site-footer) are explicitly preserved via :not().
   ───────────────────────────────────────────────────────────────────────────── */
body.cgbd-standalone > header:not(.cgbd-site-header),
body.cgbd-standalone > footer:not(.cgbd-site-footer),
body.cgbd-standalone #masthead,
body.cgbd-standalone #colophon,
body.cgbd-standalone #site-header,
body.cgbd-standalone #site-footer,
body.cgbd-standalone #header,
body.cgbd-standalone #footer,
body.cgbd-standalone .site-header:not(.cgbd-site-header),
body.cgbd-standalone .site-footer:not(.cgbd-site-footer),
body.cgbd-standalone .main-header,
body.cgbd-standalone .main-footer,
body.cgbd-standalone .header-wrapper,
body.cgbd-standalone .footer-wrapper,
body.cgbd-standalone .ast-primary-header-bar,        /* Astra */
body.cgbd-standalone .site-below-footer-wrap,        /* Astra */
body.cgbd-standalone .site-primary-header-wrap,      /* Astra */
body.cgbd-standalone .fl-page-header,                /* Beaver Builder theme */
body.cgbd-standalone .fl-page-footer,
body.cgbd-standalone .elementor-location-header,     /* Elementor Theme Builder */
body.cgbd-standalone .elementor-location-footer {
    display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NAV LINK ALIGNMENT
   Force every desktop nav link onto the same vertical centre line with the same
   line-box, so no link (e.g. the longer "সার্টিফিকেট যাচাইকরণ") can drift up or
   down due to font metrics or near-wrapping. white-space:nowrap keeps each link
   on a single line.
   ───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .cgbd-site-header .cgbd-nav-desktop {
        display: flex !important;
        align-items: center !important;
    }
    .cgbd-site-header .cgbd-nav-desktop > a {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   BENGALI READABILITY LAYER  (Classroom, Dashboard, Certifications, Verify,
   Login, Register, Forgot/Reset password, Homepage)

   The Hind Siliguri Bengali script has tall conjuncts and fine strokes, so the
   light-grey + extra-small captions used throughout the app (`text-xs`,
   `text-gray-400`, `text-gray-500`) rendered too faint and too small to read
   comfortably — e.g. the exam-rule descriptions and module-status lines on the
   Classroom page.

   This block fixes it in ONE place for EVERY page instead of editing dozens of
   inline class lists. It is scoped to `.cgbd-page-scope` (the page CONTENT
   wrapper) on purpose, so the dark footer (`.cgbd-site-footer`) and header,
   where light grey on a dark background is intentional and correct, are left
   completely untouched.

   Specificity (0,2,0) beats the Tailwind CDN's single-class utilities (0,1,0),
   so these win reliably without `!important`.
   ───────────────────────────────────────────────────────────────────────────── */

/* 1) Darken the muted greys one step so captions are legible on white/light
      backgrounds, while preserving the visual hierarchy (400 still lighter
      than 500, both still clearly secondary to the gray-700/900 body text).
      All of these greys appear only on light backgrounds inside .cgbd-page-scope.
      !important is used so these reliably beat the Tailwind Play-CDN utilities
      regardless of the order in which the CDN injects its <style> at runtime. */
.cgbd-page-scope .text-gray-400 { color: #5b6470 !important; }   /* was #9ca3af — nearly invisible */
.cgbd-page-scope .text-gray-500 { color: #404653 !important; }   /* was #6b7280 — too faint at small sizes */
.cgbd-page-scope .text-gray-600 { color: #374151 !important; }   /* keep clearly readable */

/* 2) Bump the smallest text up from 12px → 13.5px, give Bengali a comfortable
      line-height, and add a touch of weight so the fine Hind Siliguri strokes
      don't wash out at small sizes. */
.cgbd-page-scope .text-xs {
    font-size: 0.84rem !important;   /* ~13.5px */
    line-height: 1.45 !important;
}
.cgbd-page-scope .text-xs,
.cgbd-page-scope .text-gray-400,
.cgbd-page-scope .text-gray-500 {
    font-weight: 450;
}

/* 3) `text-sm` body copy (e.g. the Classroom "কীভাবে পড়বেন" study-instructions
      box and the "পরীক্ষা কীভাবে দিতে হবে" exam-rules box) uses the same thin
      Hind Siliguri strokes at 14px and reads too light/small on screenshots
      taken on lower-DPI screens. Nudge size and weight up the same way as #2,
      and darken text-gray-600/700 one notch for stronger contrast on white. */
.cgbd-page-scope .text-sm {
    font-size: 0.95rem !important;   /* ~15.2px, was 14px */
    line-height: 1.6 !important;
    font-weight: 480;
}
.cgbd-page-scope .text-gray-600 { color: #2E3430 !important; }   /* darker than var(--cgbd-gray-600) for body copy */
.cgbd-page-scope .text-gray-700 { color: #1F2421 !important; }