/* Modern Design System for Djamgatech */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Lexend:wght@600;700;800&display=swap');

/* Accessibility: Skip to main content link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--primary, #2563eb);
    color: #fff;
    border-radius: 0 0 8px 8px;
    z-index: 10000;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 0;
}

:root {
    /* Color Palette */
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary: #10b981;
    --secondary-hover: #059669;
    --accent: #7c3aed;
    --donate: #ec4899;
    --donate-hover: #db2777;
    --pro: #f59e0b;
    --pro-hover: #d97706;
    --bg-light: #f8fafc;
    --bg-dark: #0f172a;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --text-light: #f1f5f9;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
    --radius-lg: 20px;
    --radius-md: 14px;
    --radius-sm: 8px;

    /* Fonts */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: 'Lexend', var(--font-family);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-light: #0f172a;
        --text-main: #f1f5f9;
        --text-muted: #94a3b8;
        --glass-bg: rgba(30, 41, 59, 0.85);
        --glass-border: rgba(255, 255, 255, 0.1);
        --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background: var(--bg-light);
    color: var(--text-main);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header & Navigation */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--glass-shadow);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-container img {
    height: 50px;
    border-radius: 12px;
}

header h1,
header .logo-text {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.nav-links a {
    text-decoration: none;
    color: var(--text-main);
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: var(--primary);
}

.nav-donate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, var(--donate), #f472b6);
    color: #fff !important;
    padding: 0.5rem 1.1rem;
    border-radius: 9999px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.nav-donate-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.45);
    color: #fff !important;
}

/* Promo Bar (Donate + PRO) */
.promo-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    background: linear-gradient(90deg, var(--accent), var(--primary) 50%, var(--donate));
    background-size: 200% 100%;
    animation: promo-shift 8s ease infinite;
    color: #fff;
    text-align: center;
    padding: 0.6rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

@keyframes promo-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.promo-bar a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 700;
    white-space: nowrap;
}

.promo-bar a:hover {
    text-decoration-thickness: 2px;
}

.promo-sep {
    opacity: 0.5;
}

/* Hero Section */
.hero {
    position: relative;
    text-align: center;
    padding: 5rem 2rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%, rgba(37, 99, 235, 0.16), transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(16, 185, 129, 0.16), transparent 45%),
        radial-gradient(circle at 50% 100%, rgba(124, 58, 237, 0.12), transparent 55%),
        var(--bg-light);
    border-bottom: 1px solid var(--glass-border);
}

.hero h2 {
    font-family: var(--font-display);
    font-size: 3.25rem;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 1.25rem;
    color: var(--text-main);
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-muted);
    max-width: 640px;
    margin: 0 auto 2rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2.5rem;
    margin-top: 3rem;
}

.hero-stat strong {
    font-family: var(--font-display);
    font-size: 2rem;
    display: block;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-stat span {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

/* Main Content Containers */
main {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

section {
    margin-bottom: 4rem;
}

.section-title {
    font-family: var(--font-display);
    font-size: 2.1rem;
    margin-bottom: 0.5rem;
    text-align: center;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.section-subtitle {
    text-align: center;
    color: var(--text-muted);
    max-width: 560px;
    margin: 0 auto 2rem;
}

/* Controls (Search & Filter) */
.controls-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2rem;
}

.search-bar {
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-main);
    font-size: 1rem;
    width: 100%;
    max-width: 400px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: var(--glass-shadow);
}

.search-bar:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.tab-btn {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-main);
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
}

.tab-btn:hover, .tab-btn.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Glass Panels (Cards) */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.glass-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

/* Grid Layouts */
.grid {
    display: grid;
    gap: 1.5rem;
}

.cert-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.feed-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Buttons */
.btn-modern {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-secondary {
    background: var(--secondary);
    color: white;
}

.btn-secondary:hover {
    background: var(--secondary-hover);
}

.btn-donate {
    background: linear-gradient(135deg, var(--donate), #f472b6);
    color: white;
}

.btn-donate:hover {
    background: linear-gradient(135deg, var(--donate-hover), var(--donate));
}

.btn-pro {
    background: linear-gradient(135deg, var(--pro), #fbbf24);
    color: #1e1305;
}

.btn-pro:hover {
    background: linear-gradient(135deg, var(--pro-hover), var(--pro));
}

.btn-outline {
    background: transparent;
    color: var(--text-main);
    border: 1.5px solid var(--glass-border);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-lg {
    padding: 1rem 2.25rem;
    font-size: 1.05rem;
    border-radius: 10px;
}

.w-full {
    width: 100%;
}

.mt-auto {
    margin-top: auto;
}

/* Cards Content */
.card-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--text-main);
}

.card-desc {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-title-link {
    text-decoration: none;
}

.card-title-link:hover .card-title {
    color: var(--primary);
}

.card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.badge-category {
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--primary);
    color: white;
    padding: 3px 10px;
    border-radius: 999px;
    display: inline-block;
    width: fit-content;
}

.badge-count {
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(124, 58, 237, 0.12);
    color: var(--accent);
    padding: 3px 10px;
    border-radius: 999px;
    display: inline-block;
    width: fit-content;
}

.card-footer-row {
    display: flex;
    gap: 0.6rem;
    margin-top: auto;
}

.card-footer-row .btn-modern {
    flex: 1;
}

/* Promo / CTA cards (used on homepage + cert landing pages) */
.cta-card {
    border-radius: var(--radius-lg);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: var(--shadow-lg);
    color: #fff;
}

.cta-card h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
}

.cta-card p {
    opacity: 0.92;
    font-size: 0.95rem;
}

.cta-card.cta-donate {
    background: linear-gradient(135deg, var(--donate), #f97316);
}

/* The free app leads the CTA grid, so it gets the primary brand colour
   while PRO keeps its darker "upgrade" treatment below. */
.cta-card.cta-free {
    background: linear-gradient(135deg, var(--primary), var(--accent));
}

.cta-card.cta-pro {
    background: linear-gradient(135deg, #1e293b, #334155);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.cta-card.cta-pro h3 {
    background: linear-gradient(135deg, var(--pro), #fde68a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.app-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.app-badges img {
    height: 42px;
    border-radius: 8px;
}

/* Footer */
footer {
    padding: 3rem 2rem 1.5rem;
    background: var(--glass-bg);
    border-top: 1px solid var(--glass-border);
    color: var(--text-muted);
    margin-top: auto;
}

.footer-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 2rem;
    padding-bottom: 2rem;
    text-align: left;
}

.footer-col h4 {
    font-family: var(--font-display);
    color: var(--text-main);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.footer-col p {
    font-size: 0.9rem;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-col ul a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer-col ul a:hover {
    color: var(--primary);
}

.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid var(--glass-border);
    padding-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
}

/* Breadcrumbs (cert landing pages) */
.breadcrumb {
    max-width: 1200px;
    margin: 1rem auto 0;
    padding: 0 2rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.breadcrumb a {
    color: var(--text-muted);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--primary);
}

/* Certification landing page hero */
.cert-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2rem;
    align-items: start;
}

.cert-hero-main h1 {
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1.15;
    margin-bottom: 1rem;
    letter-spacing: -0.01em;
}

.cert-hero-main p.lead {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.cert-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cert-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

.cert-content h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    margin: 2.5rem 0 1rem;
}

.cert-content ul {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}

.cert-content li {
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.cert-content p {
    margin-bottom: 1rem;
    color: var(--text-main);
}

/* FAQ Accordion */
.faq-item {
    border-bottom: 1px solid var(--glass-border);
}

.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 1rem 0;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.faq-question::after {
    content: '+';
    font-size: 1.3rem;
    color: var(--primary);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.faq-item.open .faq-question::after {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    color: var(--text-muted);
}

.faq-item.open .faq-answer {
    max-height: 300px;
    padding-bottom: 1rem;
}

/* Related certifications */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.related-card {
    display: block;
    text-decoration: none;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    color: var(--text-main);
    font-weight: 600;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.related-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary);
}

.related-card span {
    display: block;
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Certifications Hub page */
.hub-category-block {
    margin-bottom: 3rem;
}

.hub-category-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary);
    display: inline-block;
}

/* Utilities */
.hidden {
    display: none !important;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.justify-between {
    justify-content: space-between;
}

.p-4 {
    padding: 1.5rem;
}

/* Responsive */
@media (max-width: 900px) {
    .cert-hero {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 1rem;
    }

    .hero h2 {
        font-size: 2rem;
    }

    .cert-hero-main h1 {
        font-size: 1.8rem;
    }

    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    .promo-bar {
        flex-direction: column;
        gap: 0.35rem;
    }

    .promo-sep {
        display: none;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-col ul {
        align-items: center;
    }

    .footer-bottom {
        justify-content: center;
        text-align: center;
    }
}

/* ------------------------------------------------------------------
   In-app suppression of external payment links.

   The iOS/macOS wrapper appends "iOSApp" to the WebKit user agent (see
   AppConfig.Web.userAgentApplicationName). A script in <head> sets
   .in-app on <html> before first paint, and these rules hide every
   donation entry point.

   App Store Review Guideline 3.1.1 prohibits linking to external
   purchase or donation flows from inside an app. The same pages are
   served to the public web, where the links must remain visible — so
   this is a display rule, not a content change.
   ------------------------------------------------------------------ */
.in-app .nav-donate-btn,
.in-app .cta-card.cta-donate,
.in-app .promo-donate,
.in-app .promo-donate + .promo-sep,
.in-app .footer-donate,
.in-app a[href*="buy.stripe.com"] {
    display: none !important;
}

/* With the donate and free-app cards hidden, let the PRO card take the
   full row rather than sitting orphaned in a three-column grid.
   This used to be qualified with :only-child, which stopped matching the
   moment the free-app card joined the grid — :only-child counts DOM
   siblings, not visible ones, and its two siblings are only display:none. */
.in-app .cta-grid > .cta-card.cta-pro {
    grid-column: 1 / -1;
    max-width: 500px;
    margin-inline: auto;
}

/* ------------------------------------------------------------------
   Competing-storefront badges.

   App Store Review Guideline 3.1.1 / 2.3.10 — an iOS app must not point
   users at other platforms' stores. The Apple badge stays; Google Play,
   Microsoft Store and Amazon Appstore links are hidden in-app and remain
   visible to public web visitors.
   ------------------------------------------------------------------ */
.in-app a[href*="play.google.com"],
.in-app a[href*="microsoft.com/store"],
.in-app a[href*="apps.microsoft.com"],
.in-app a[href*="amazon.com/dp"],
.in-app a[href*="amazon.com/gp"] {
    display: none !important;
}

/* ------------------------------------------------------------------
   App-download CTAs, suppressed in-app.

   The in-content .app-cta block and the homepage's free-app card both
   pitch "download the app" — pointless to someone reading this inside
   the app, and the PRO line in .app-cta is redundant there too, since
   "iOSApp" in the user agent is set only by the PRO wrapper
   (AppConfig.Web.userAgentApplicationName). The Play badges inside
   them are already caught by the rule above, but hiding the whole
   block is both cleaner and one less 2.3.10 surface.
   ------------------------------------------------------------------ */
.in-app .app-cta,
.in-app .cta-card.cta-free {
    display: none !important;
}

/* ------------------------------------------------------------------
   Exam domain weighting table
   Used on the certification landing pages to show how the real exam
   distributes its marks. Kept deliberately plain so it inherits the
   surrounding card styling rather than fighting it.
   ------------------------------------------------------------------ */
.domain-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0 1.75rem;
    font-size: 0.97rem;
}

.domain-table th,
.domain-table td {
    text-align: left;
    padding: 0.7rem 0.9rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.domain-table thead th {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.8rem;
    opacity: 0.7;
    border-bottom-width: 2px;
}

.domain-table td:last-child,
.domain-table th:last-child {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.domain-table tbody tr:last-child td {
    border-bottom: none;
}

@media (prefers-color-scheme: dark) {
    .domain-table th,
    .domain-table td {
        border-bottom-color: rgba(255, 255, 255, 0.12);
    }
}

@media (max-width: 520px) {
    .domain-table {
        font-size: 0.9rem;
    }
    .domain-table th,
    .domain-table td {
        padding: 0.55rem 0.5rem;
    }
}

/* ============================================================
   In-content app CTA  (tools/inject_app_cta.py)
   ------------------------------------------------------------
   Sits at the end of <main> on cert landing pages and tutorials
   — the pages search traffic actually lands on, which previously
   offered nothing but a footer badge below the fold.
   Free app is the ask; PRO is a secondary text link, never a
   competing badge. Static HTML, not JS-injected, so the links
   stay crawlable and there's no layout shift.
   ============================================================ */
.app-cta {
    margin: 3rem 0 2rem;
    padding: 2rem;
    border-radius: 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(10px);
}
.app-cta h2 {
    margin: 0 0 .6rem;
    font-size: 1.4rem;
    color: var(--text-main);
}
.app-cta p {
    margin: 0 0 1.2rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 62ch;
}
.app-cta .app-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
}
.app-cta .app-badges img { height: 44px; width: auto; }
.app-cta-pro {
    margin: 1.2rem 0 0 !important;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border);
    font-size: .93rem;
}
.app-cta-pro a {
    color: var(--pro);
    font-weight: 600;
    text-decoration: none;
}
.app-cta-pro a:hover { color: var(--pro-hover); text-decoration: underline; }

@media (max-width: 600px) {
    .app-cta { padding: 1.4rem; margin: 2rem 0 1.5rem; }
    .app-cta h2 { font-size: 1.2rem; }
    .app-cta .app-badges img { height: 40px; }
}