/* ==========================================================================
   I. BASE & RESET
   ========================================================================== */

/* --- COLORS --- */
:root {
    --primary: #1A365D; /* Navy Blue */
    --accent: #FFC300;  /* Yellow */
    --light: #f8f9fa;
    --white: #ffffff;
}

/* --- GLOBAL RESET & SCROLLBAR FIX --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* THIS FIXES THE JUMPING NAVBAR: Forces scrollbar track to always show */
html { overflow-y: scroll; } 

body { 
    font-family: 'Arial', 'Helvetica', sans-serif; 
    color: #333; 
    line-height: 1.6; 
    background-color: #fcfcfc; 
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Global h3 Color Change */
h3 { color: #1A365D; }


/* ==========================================================================
   II. LAYOUT & HEADER
   ========================================================================== */

/* --- HEADER & NAV --- */
header { 
    background: var(--white); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    position: sticky; top: 0; 
    z-index: 1000; 
}

nav { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1rem 2rem; 
    position: relative; /* Important for mobile menu positioning */
}

.logo { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    font-size: 1.5rem; 
    font-weight: bold; 
    color: var(--primary); 
}

/* Nav Links Container */
.nav-links { 
    display: flex; 
    gap: 0.8rem; 
    align-items: center; 
    list-style: none; /* Removes bullet points */
}

/* Nav Buttons Style */
.nav-links a { 
    color: var(--primary); 
    font-weight: 500; 
    font-size: 0.95rem; 
    transition: all 0.3s; 
    padding: 0.5rem 1rem; 
    border-radius: 20px;
    text-decoration: none; 
}

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

/* Active Page Style (Blue Button) */
.nav-links a.active { 
    background-color: var(--primary); 
    color: var(--white) !important; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.nav-links .badge {
    position: static !important;  /* Snap back to normal flow */
    transform: none !important;   /* Remove any shifting */
    margin-left: 5px;             /* Add space between Name and Badge */
    vertical-align: middle;
}

/* Login Button Specifics */
.login-link { border: 2px solid var(--primary); }
.login-link:hover { background: var(--primary); color: white !important; }

/* Subscribe Button */
.cta-button { 
    background: var(--primary); 
    color: var(--light); 
    padding: 0.35rem 0.8rem; 
    border-radius: 15px; 
    font-size: 0.85rem; 
    font-weight: bold; 
    border: 2px solid var(--primary); 
    transition: 0.3s; 
    margin-left: 1rem; 
    text-decoration: none;
}
.cta-button:hover { 
    background: var(--accent); 
    color: var(--primary); 
    border-color: var(--primary); 
}

/* --- HAMBURGER MENU STYLES (Hidden on Desktop) --- */
.mobile-menu {
    display: none; /* Hidden by default */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1001; /* Above everything */
}

/* These are the 3 lines of the hamburger */
.mobile-menu span {
    width: 25px;
    height: 3px;
    background-color: var(--primary); /* Navy Blue Color */
    border-radius: 3px;
    display: block;
}

/* --- DROPDOWNS --- */
.dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-content {
    right: auto !important; /* Reset the 'right: 0' from the user menu */
    left: 0 !important;     /* Align to the left edge */
    min-width: 200px;       /* Slightly wider for text */
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0; /* Aligns dropdown to the right side of the link */
    background-color: white;
    min-width: 160px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    z-index: 1;
    border-radius: 8px;
    overflow: hidden;
    margin-top: 0; 
    padding-top: 5px;
}

.dropdown-content a {
    color: #1A365D !important;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-weight: normal !important;
    border-bottom: 1px solid #f4f4f4;
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background-color: #f8f9fa;
    color: var(--primary) !important;
    padding-left: 20px; /* Small animation effect */
}

/* Show the dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* --- FOOTER --- */
footer { background: #1A365D; color: white; padding: 3rem 2rem 1rem; }
.footer-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-bottom: 2rem; }
.footer-links { list-style: none; }
.footer-links a { color: white; text-decoration: none; opacity: 0.8; line-height: 2; }
.social-links { display: flex; gap: 1rem; margin-top: 1rem; }
.social-links a { width: 40px; height: 40px; background: rgba(255, 195, 0, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFC300; text-decoration: none; }
.footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); opacity: 0.7; }


/* ==========================================================================
   III. COMPONENTS (Buttons, Cards, Badges, etc)
   ========================================================================== */

/* --- BUTTONS --- */
.btn-primary { background: var(--accent); color: var(--primary); padding: 1rem 2.5rem; border-radius: 30px; font-weight: bold; font-size: 1.1rem; border: 2px solid var(--accent); transition: 0.3s; display: inline-block; }
.btn-primary:hover { background: transparent; color: var(--accent); transform: translateY(-3px); }

.btn-secondary { background: transparent; color: var(--white); padding: 1rem 2.5rem; border-radius: 30px; font-weight: bold; font-size: 1.1rem; border: 2px solid var(--white); transition: 0.3s; display: inline-block; margin-left: 10px; }
.btn-secondary:hover { background: var(--white); color: var(--primary); transform: translateY(-3px); }

.btn-sm { background: var(--primary); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.9rem; }
.btn-sm:hover { background: var(--accent); color: var(--primary); }

.btn-text { color: var(--primary); font-weight: bold; text-decoration: underline; font-size: 1rem; margin-top: 1.5rem; display: inline-block; }

.btn-buy { background: #1A365D; color: white; padding: 0.5rem 1rem; border-radius: 20px; text-decoration: none; font-size: 0.9rem; transition: 0.3s; }
.btn-buy:hover { background: #FFC300; color: #1A365D; }

.btn-large { background: #1A365D; color: white; padding: 1.2rem 3rem; border-radius: 30px; text-decoration: none; font-weight: bold; font-size: 1.2rem; transition: all 0.3s; display: inline-block; border: 2px solid #1A365D; }
.btn-large:hover { background: #FFC300; color: #1A365D; }

.btn-block { display: block; text-align: center; width: 100%; }

/* --- FILTER PILLS --- */
.filter-container { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2rem; }
.filter-btn { border: none; outline: none; padding: 10px 20px; background-color: #f1f1f1; cursor: pointer; border-radius: 25px; /* Pill shape */ font-size: 0.9rem; font-weight: 600; color: #666; transition: all 0.3s ease; }
.filter-btn:hover { background-color: #ddd; color: #333; }
.filter-btn.active { background-color: var(--accent); color: var(--primary); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }

/* --- CARDS (General) --- */
.card { 
    background: var(--white); 
    border-radius: 15px; 
    overflow: hidden; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); 
    transition: 0.3s; 
    display: flex; 
    flex-direction: column; 
    border: 1px solid #eee; 
    display: flex; 
    flex-direction: column; 
    height: 100%;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }

.card-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; }
.card-content p {
    color: #666;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    /* Text Truncation Logic */
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important; /* Limits to 4 lines */
    line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
}
.card-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid #eee; }

/* --- TAGS & BADGES --- */
.tag { background: #f8f9fa; color: #666; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.85rem; border: 1px solid #e0e0e0; }
.badge { position: absolute; top: 15px; right: 15px; background: var(--accent); color: var(--primary); padding: 5px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: bold; }

.certification-tag {
    display: inline-block;
    background-color: #e3f2fd; /* Light Blue background */
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 5px;
}
/* Duplicate rule for cert tag kept as requested */
.certification-tag {
    display: inline-block;
    background-color: #FFC300; /* Your brand's yellow */
    color: #1A365D; /* Your brand's blue for text contrast */
    font-size: 0.6rem; /* Smaller font size than the h3 */
    font-weight: bold;
    padding: 0.2rem 0.6rem; /* Padding around the text */
    border-radius: 12px; /* Rounded corners */
    margin-left: 0.8rem; /* Space between the title and the tag */
    vertical-align: middle; /* Aligns the tag with the middle of the text */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- GRIDS --- */
.grid-container, 
.resource-grid,

.dashboard-grid
{ display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
    gap: 2rem; 
}

.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }


/* ==========================================================================
   IV. PAGE SPECIFIC STYLES
   ========================================================================== */

/* --- HERO & HEADERS --- */
.hero { background: linear-gradient(135deg, var(--primary) 0%, #2d4a7c 100%); color: var(--white); padding: 6rem 2rem; text-align: center; }
.hero h1 { font-size: 3rem; margin-bottom: 1rem; font-weight: 900; }
.hero p { font-size: 1.3rem; margin-bottom: 2rem; opacity: 0.9; max-width: 800px; margin-left: auto; margin-right: auto; }

.page-header {
    background: linear-gradient(135deg, var(--primary) 0%, #2d4a7c 100%);
    color: var(--white);
    padding: 3rem 2rem;
    text-align: center;
    margin-bottom: 2rem;
}
.page-header h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
.page-header p { font-size: 1.1rem; opacity: 0.9; max-width: 600px; margin: 0 auto; }

/* --- ABOUT SECTION --- */
.about { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; }
.about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-text h2 { font-size: 2.5rem; color: #1A365D; margin-bottom: 1.5rem; }
.about-text p { color: #666; font-size: 1.1rem; margin-bottom: 1rem; line-height: 1.8; }
.about-image { width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; font-size: 5rem; color: #1A365D; position: relative; }

/* --- DASHBOARD --- */
.dashboard-icon-area {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border-bottom: 1px solid #eee;
}
.dashboard-grid .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* --- SHOP & PRODUCTS --- */
.shop-section { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; }

.product-card { background: white; border: 1px solid #e0e0e0; border-radius: 15px; overflow: hidden; transition: all 0.3s; display: flex; flex-direction: column; }
.product-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.1); transform: translateY(-5px); }
.product-image-area { height: 180px; background: #f4f4f4; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #1A365D; position: relative; }
.product-badge { position: absolute; top: 15px; right: 15px; background: #FFC300; color: #1A365D; padding: 5px 12px; border-radius: 15px; font-size: 0.8rem; font-weight: bold; }
.product-details { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; }
.product-details h3 { font-size: 1.2rem; color: #1A365D; margin-bottom: 0.5rem; }
.product-details p { color: #666; font-size: 0.95rem; margin-bottom: 1.5rem; }
.product-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #eee; padding-top: 1rem; }
.price { font-size: 1.3rem; font-weight: bold; color: #1A365D; }

/* Duplicate Product Image rule kept */
.product-image { height: 180px; background: #f4f4f4; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: var(--primary); position: relative; }

/* --- RESOURCES & LEARNING --- */
.resource-list { list-style: none; max-width: 800px; margin: 0 auto; }
.resource-item {
    background: white;
    padding: 1.5rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-left: 5px solid #FFC300;
    transition: 0.3s;
}
.resource-item:hover { transform: translateX(5px); }
.resource-btn {
    color: #1A365D;
    font-weight: bold;
    text-decoration: none;
    border: 2px solid #1A365D;
    padding: 0.5rem 1.5rem;
    border-radius: 5px;
    white-space: nowrap;
    margin-left: 1rem;
}
.resource-btn:hover { background: #1A365D; color: white; }

.resource-grid {
    display: grid;
    /* This creates a responsive grid automatically */
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
    gap: 2rem;
}

.resource-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.resource-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: var(--accent);
}
.resource-card.hide { display: none; }

.card-header { margin-bottom: 1rem; }
.card-header h3 { font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--primary); }
.card-desc { color: #555; font-size: 0.95rem; margin-bottom: 1.5rem; flex-grow: 1; /* Pushes the button to the bottom */ }

.card-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 1.5rem;
    color: #777;
    font-size: 0.85rem; /* Slightly smaller to fit 3 items */
    font-weight: 500;
    border-top: 1px solid #f0f0f0;
    padding-top: 1rem;
    flex-wrap: wrap; /* Allows items to drop to next line on mobile */
}
.card-meta span { display: flex; align-items: center; gap: 5px; }
.card-meta i { color: var(--accent); }

/* --- CHALLENGES --- */
.challenge-card { border: 2px dashed var(--primary); background: #f0f7ff; padding: 2rem; text-align: center; border-radius: 15px; transition: 0.3s; display: flex; flex-direction: column; justify-content: space-between; }
.challenge-card:hover { background: var(--white); border-style: solid; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.status { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; margin-bottom: 1rem; width: fit-content; margin: 0 auto 1rem auto; }
.active { background: #4caf50; color: white; }
.past { background: #9e9e9e; color: white; }
#challenge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }

.challenge-status { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; margin-bottom: 1rem; width: fit-content; margin-left: auto; margin-right: auto; }
.status-active { background: #4caf50; color: white; }
.status-past { background: #9e9e9e; color: white; }

/* --- PORTFOLIO --- */
.portfolio { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
.portfolio-item { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.1); transition: all 0.3s; cursor: pointer; }
.portfolio-image { width: 100%; height: 250px; background: linear-gradient(135deg, #1A365D 0%, #2d4a7c 100%); display: flex; align-items: center; justify-content: center; color: #FFC300; font-size: 3rem; }
.portfolio-content { padding: 1.5rem; }
.portfolio-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }

/* --- BLOG & ARTICLES --- */
.blog-section { background: #f8f9fa; padding: 5rem 2rem; }

.article-card { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.02); transition: all 0.3s; cursor: pointer; 
display: flex; flex-direction: column; height: 100%; } /*same as portfolio item*/
.article-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.article-image { width: 100%; height: 250px; background: #eaeaea; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #FFC300;} /* icon */
/* .article-content pre { margin: 1.2rem 0; padding: 1.2rem; flex-grow: 1; } */
.article-content { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; } /* white section from date to Read article link */
.article-meta { font-size: 0.85rem; color: #888; margin-bottom: 0.5rem; text-transform: uppercase; font-weight: bold; letter-spacing: 0.5px; } /* date */
.article-title { font-size: 1.4rem; color: #1A365D; margin-bottom: 0.8rem; font-weight: bold; line-height: 1.3; } /*title */
.read-more { color: #1A365D; text-decoration: none; font-weight: bold; display: inline-block; padding-top: 1rem; margin-top: auto; }
.read-more:hover { color: #FFC300; }

.article-nav { margin-bottom: 2rem; }
.btn-back { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); font-weight: bold; text-decoration: none; font-size: 0.9rem; padding: 8px 16px; background-color: #e3f2fd; border-radius: 20px; transition: all 0.2s ease; }
.btn-back:hover { background-color: var(--primary); color: white; transform: translateX(-3px); }

/* Article Body Typography */
.article-body { font-size: 1.1rem; line-height: 1.8; color: #333; }
.article-body h2 { color: var(--primary); font-size: 1.8rem; margin-top: 2.5rem; margin-bottom: 1rem; border-bottom: 2px solid #f0f0f0; padding-bottom: 0.5rem; }
.article-body h3 { color: #444; font-size: 1.4rem; margin-top: 2rem; margin-bottom: 0.8rem; }
.article-body ul, .article-body ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.article-body li { margin-bottom: 0.5rem; }
.article-body ul { list-style-type: disc; /* Ensure bullets show */ }

/* Article Tables */
.article-body table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 0.95rem; border: 1px solid #b0b0b0; }
.article-body th, .article-body td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; border: 1px solid #b0b0b0; }
.article-body table th { background-color: #1A365D !important; /* Navy Blue */ color: white !important; font-weight: bold; text-transform: capitalize; padding: 12px 15px; border-bottom: 1px solid #ddd; }
.article-body tr:nth-child(even) { background-color: #f8f9fa; /* Zebra striping */ }
.article-body tr:hover { background-color: #f1f1f1; }

/* Article Code Blocks */
.article-body pre { background: #2d2d2d; /* Dark theme for code block */ color: #f8f8f2; padding: 1.5rem; border-radius: 8px; overflow-x: auto; margin: 1.5rem 0; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.9rem; }
.article-body code { background: #f4f4f4; padding: 2px 6px; border-radius: 4px; color: #e83e8c; /* Pinkish color for inline code */ font-family: monospace; }

/* Article Images */
.article-body img { max-width: 100% !important; /* Force fit within container */ height: auto !important; /* Maintain aspect ratio */ border-radius: 8px; margin: 2rem 0; /* Add space above/below */ display: block; }

/* Article Meta Row */
.article-meta-row { display: flex; gap: 20px; color: #666; font-size: 0.95rem; margin-top: 0.5rem; align-items: center; }
.article-meta-row span { display: flex; align-items: center; gap: 8px; }
.article-meta-row i { color: var(--accent); }

/* --- AUTHENTICATION (Login/Register) --- */
.auth-section { min-height: 80vh; /* Centers content vertically */ display: flex; align-items: center; justify-content: center; background: #f0f2f5; padding: 2rem; }
.auth-card { background: var(--white); width: 100%; max-width: 450px; padding: 2.5rem; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.auth-header { text-align: center; margin-bottom: 2rem; }
.auth-header h2 { color: var(--primary); font-size: 2rem; margin-bottom: 0.5rem; }

.auth-toggle { display: flex; background: #f0f2f5; padding: 5px; border-radius: 30px; margin-bottom: 2rem; position: relative; }
.toggle-btn { flex: 1; border: none; background: transparent; padding: 10px; border-radius: 25px; font-weight: bold; color: #666; cursor: pointer; transition: 0.3s; }
.toggle-btn.active { background: var(--primary); color: white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5rem; color: var(--primary); font-weight: 500; }
.form-control { width: 100%; padding: 12px 15px; border: 2px solid #e1e1e1; border-radius: 10px; font-size: 1rem; transition: 0.3s; 
    background-color: #ffffff; color: #333; border: 2px solid #e1e1e1; height: auto; min-height: 45px; }
.form-control:focus { border-color: var(--primary); outline: none; background-color: #fff; }

.auth-btn { width: 100%; padding: 12px; background: var(--accent); color: var(--primary); border: none; border-radius: 10px; font-weight: bold; font-size: 1.1rem; cursor: pointer; transition: 0.3s; margin-top: 1rem; }
.auth-btn:hover { background: var(--primary); color: var(--white); }

.forgot-password { display: block; text-align: center; margin-top: 1rem; color: #666; font-size: 0.9rem; color: var(--primary); /* Navy Blue */ text-decoration: underline; font-weight: 500; }
.forgot-password:hover { color: var(--accent); /* Yellow on hover */ }

/* --- PRICING --- */
.pricing-card { background: white; border: 1px solid #eee; border-radius: 15px; padding: 2rem; width: 100%; max-width: 350px; text-align: center; position: relative; transition: transform 0.3s ease; }
.pricing-card.premium { border: 2px solid var(--accent); box-shadow: 0 10px 30px rgba(255, 195, 0, 0.2); transform: scale(1.02); /* Make it slightly bigger */ }

.best-value { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--accent); color: var(--primary); padding: 5px 15px; border-radius: 20px; font-weight: bold; font-size: 0.8rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.price-tag { font-size: 2.5rem; font-weight: bold; margin-bottom: 2rem; color: #333; }

.pricing-features { text-align: left; margin-bottom: 2rem; list-style: none; padding: 0; }
.pricing-features li { margin-bottom: 1rem; display: flex; align-items: center; gap: 10px; }
.pricing-features i.fa-check { color: green; }
.pricing-features li.disabled { opacity: 0.5; }
.pricing-features li.disabled i { color: #ccc; }

/* --- CERTIFICATIONS & MEMBERSHIP --- */
.cert-card { border-left: 4px solid var(--accent); }

.btn-cert { background-color: var(--primary); color: white; transition: all 0.3s ease; }
.btn-cert:hover { background-color: var(--accent); /* Yellow */ color: var(--primary); /* Dark Blue Text */ box-shadow: 0 5px 15px rgba(255, 195, 0, 0.4); /* Glow effect */ }

.membership-banner { background: linear-gradient(rgba(26, 54, 93, 0.95), rgba(26, 54, 93, 0.9)), url('https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'); background-size: cover; background-position: center; color: white; text-align: center; padding: 5rem 2rem; margin: 2rem 0; }
.membership-content { max-width: 800px; margin: 0 auto; }
.membership-content h2 { font-size: 2.5rem; margin-bottom: 1rem; color: #FFC300; }

/* --- TESTIMONIALS --- */
.testimonials { background: #1A365D; color: white; padding: 5rem 2rem; }
.testimonials-container { max-width: 1200px; margin: 0 auto; }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }
.testimonial-card { background: rgba(255, 255, 255, 0.1); padding: 2rem; border-radius: 15px; border-left: 4px solid #FFC300; }
.testimonial-author { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.author-avatar { width: 50px; height: 50px; background: #FFC300; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: #1A365D; }


/* ==========================================================================
   V. PLUGINS & UTILITIES
   ========================================================================== */

/* --- CKEDITOR 5 OVERRIDES --- */
.ck.ck-editor__main .ck-content { color: #000 !important; /* Pure Black */ }
.ck.ck-editor__main .ck-content p { color: #000 !important; }
.ck.ck-editor__main .ck-content h1,
.ck.ck-editor__main .ck-content h2,
.ck.ck-editor__main .ck-content h3 { color: #1A365D !important; /* Your Navy Blue */ }

/* --- CODE BLOCK TOOLBAR COPY BUTTON --- */
div.code-toolbar > .toolbar { opacity: 1 !important; top: 10px !important; right: 10px !important; }
div.code-toolbar > .toolbar > .toolbar-item > button { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 4px !important; color: #777 !important; padding: 6px 10px !important; cursor: pointer; transition: all 0.2s ease; font-size: 0 !important; }
div.code-toolbar > .toolbar > .toolbar-item > button::before { content: '\f0c5'; /* Copy Icon */ font-family: "Font Awesome 6 Free"; font-weight: 400; /* Regular Style (Outline) */ font-size: 1.3rem; color: #777; }
div.code-toolbar > .toolbar > .toolbar-item > button:hover { background-color: rgba(0,0,0,0.05) !important; }
div.code-toolbar > .toolbar > .toolbar-item > button:hover::before { color: var(--primary) !important; /* Blue on hover */ }
div.code-toolbar > .toolbar > .toolbar-item > button[data-copy-state="copied"]::before { content: '\f00c' !important; /* Checkmark Icon */ font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; /* MUST BE 900 (Solid) for Checkmark to exist! */ color: #2e7d32 !important;   /* Green */ }

/* --- GLOBAL ANNOUNCEMENT BAR --- */
.announcement-bar { width: 100%; padding: 10px 20px; text-align: center; font-size: 0.9rem; font-weight: bold; position: relative; z-index: 2000; /* Ensure it's above the navbar */ }
.announcement-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; }
.announcement-link { background: rgba(255, 255, 255, 0.2); padding: 2px 10px; border-radius: 15px; color: inherit; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.4); font-size: 0.8rem; transition: 0.3s; }
.announcement-link:hover { background: rgba(255, 255, 255, 0.4); transform: translateX(3px); }

/* Announcement Color Themes */
.announcement-bar.info { background-color: #1A365D; color: white; }
.announcement-bar.warning { background-color: #FFC300; color: #1A365D; }
.announcement-bar.success { background-color: #2e7d32; color: white; }
.announcement-bar.danger { background-color: #c62828; color: white; }

/* --- SHARE BUTTONS --- */
.share-btn { color: white !important; border: none; padding: 8px 15px; border-radius: 4px; font-size: 0.85rem; font-weight: 500; transition: transform 0.2s, opacity 0.2s; display: flex; align-items: center; gap: 8px; }
.share-btn:hover { transform: translateY(-2px); opacity: 0.9; color: white !important; }
.share-btn.linkedin { background-color: #0077b5; }
.share-btn.twitter { background-color: #000000; } 
.share-btn.whatsapp { background-color: #25D366; }
.share-btn.email { background-color: #666666; }
.share-btn.copy-link { background-color: #546e7a; cursor: pointer; }
.share-btn.copy-link:active { background-color: #455a64; transform: translateY(0); }

/* --- UTILITY CLASSES --- */
.hidden { display: none; }
.section-padding { padding: 5rem 2rem; max-width: 1200px; margin: 0 auto; }
.bg-light { background: var(--light); }
.section-title { text-align: center; font-size: 2.5rem; color: var(--primary); margin-bottom: 0.5rem; }
.section-subtitle { text-align: center; color: #666; margin-bottom: 3rem; font-size: 1.1rem; }
.cta-section { background: #EDECEC; padding: 5rem 2rem; text-align: center; }
.services-container { max-width: 1200px; margin: 0 auto; }

/* Affiliate Disclosure */
.affiliate-notice { background-color: #fff8e1; /* Very light yellow */ border-bottom: 1px solid #ffe0b2; padding: 1.5rem 2rem; text-align: center; }
.notice-content { max-width: 800px; margin: 0 auto; color: #666; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 10px; }
.notice-content i { color: var(--accent); font-size: 1.2rem; }

/* Category Title */
.category-title { color: var(--primary); font-size: 2rem; margin-bottom: 2rem; border-bottom: 2px solid #eee; padding-bottom: 0.5rem; }


/* ==========================================================================
   VI. MEDIA QUERIES (Mobile Responsiveness)
   ========================================================================== */
@media (max-width: 900px) {
    
    /* 1. Show the Hamburger Icon */
    .mobile-menu {
        display: flex;
    }

    /* 2. Hide and Reposition the Links */
    .nav-links {
        display: none; /* Hidden until toggled */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Push it right below the header */
        left: 0;
        width: 100%;
        background: white;
        padding: 1rem 0;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        border-top: 1px solid #eee;
    }

    /* 3. The 'active' class makes the menu appear */
    .nav-links.active {
        display: flex;
    }

    /* 4. Style links for mobile touch targets */
    .nav-links li {
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }

    .nav-links a {
        display: block;
        width: 90%;
        margin: 0 auto;
    }

    /* 5. Hide the CTA button on mobile if it takes too much space, or stack it */
    .cta-button {
        display: block;
        margin: 10px auto;
        width: fit-content;
    }

    /* --- 6. COOKIE BANNER MOBILE FIX (ADDED) --- */
    #cookie-banner {
        z-index: 20000 !important;   /* Ensure it sits on top of everything */
        bottom: 0 !important;        /* Force stick to bottom */
        left: 0 !important;
        width: 100% !important;
        padding: 15px !important;    /* Slightly less padding on mobile */
    }

    /* Fix the internal layout to stack vertically on mobile */
    #cookie-banner > div {
        flex-direction: column !important; 
        align-items: stretch !important;
        gap: 15px !important;
    }

    /* Remove the problematic min-width that pushes content off screen */
    #cookie-banner > div > div:first-child {
        min-width: auto !important;
        width: 100% !important;
    }

    /* Make the buttons bigger and full-width for easier tapping */
    #cookie-banner button {
        width: 100% !important;
        padding: 12px !important;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {

    pre[class*="language-"] {
        padding: 1rem 0.8rem 1rem 2.6rem; /* Reduce left padding */
        font-size: 0.8rem;              /* Slightly smaller text */
    }

    /* Make line numbers narrower */
    .line-numbers .line-numbers-rows {
        width: 2rem;
    }
}

/* Ensure code blocks never break the layout on mobile */
pre[class*="language-"] {
    max-width: 100%;            /* Never exceed parent width */
    overflow-x: auto;           /* Enable horizontal scrolling */
    white-space: pre;           /* Preserve formatting */
    -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
}


/* ============================
   Prism Custom Light Pink Theme
   ============================ */

/* Code block container */
pre[class*="language-"] {
    background: #fff5f8;               /* Very light pink background */
    border: 1px solid #f3c2cf;          /* Soft pink border */
    border-radius: 10px;                /* Rounded corners */
    padding: 1.2rem;                    /* Comfortable spacing */
    overflow-x: auto;                   /* Horizontal scroll for long lines */
    font-size: 0.9rem;                  /* Slightly smaller than body text */
    line-height: 1.6;
}

/* Inline code */
:not(pre) > code {
    background: #fff0f4;                /* Lighter pink for inline code */
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #b83280;                     /* Soft rose text */
}

/* Code font */
code,
pre {
    font-family: "JetBrains Mono", "Fira Code", monospace;
}

/* Syntax colors */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #8e7b85;                     /* Muted gray-pink */
    font-style: italic;
}

.token.keyword {
    color: #c2185b;                     /* Deep rose */
    font-weight: 600;
}

.token.string {
    color: #2e7d32;                     /* Soft green for strings */
}

.token.function {
    color: #6a1b9a;                     /* Purple for functions */
}

.token.number {
    color: #1565c0;                     /* Blue for numbers */
}

.token.operator {
    color: #444;
}

.token.boolean {
    color: #ad1457;
}

/* Prism toolbar (Copy button) */
div.code-toolbar > .toolbar {
    opacity: 1;
}

div.code-toolbar > .toolbar button {
    background: #f8bbd0;                /* Pink button */
    color: #4a0033;
    border-radius: 6px;
    font-size: 0.7rem;
    padding: 4px 8px;
}

div.code-toolbar > .toolbar button:hover {
    background: #f8a5c0;
}

/* ============================
   Medium-style code blocks
   ============================ */

pre[class*="language-"] {
    background: #fff5f8;              /* Very light pink */
    border: 1px solid #f3c2cf;
    border-radius: 12px;
    padding: 1.4rem 1.2rem 1.4rem 3.2rem; /* Extra left for line numbers */
    margin: 2rem 0;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.7;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

/* Code font */
code,
pre {
    font-family: "JetBrains Mono", "Fira Code", monospace;
}


:not(pre) > code {
    background: #fff0f4;
    padding: 3px 7px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #b83280;
}

.token.comment {
    color: #8e7b85;
    font-style: italic;
}

.token.keyword {
    color: #c2185b;
    font-weight: 600;
}

.token.string {
    color: #2e7d32;
}

.token.function {
    color: #6a1b9a;
}

.token.number {
    color: #1565c0;
}

.token.operator {
    color: #444;
}

.token.boolean {
    color: #ad1457;
}

pre.language-python {
    border-left: 5px solid #4b8bbe; /* Python blue */
}

pre.language-sql {
    border-left: 5px solid #2e7d32; /* Database green */
}

pre.language-dax {
    border-left: 5px solid #f2c811; /* Power BI yellow */
}

pre:not([class*="language-"]) {
    border-left: 5px solid #bbb;
}


/* Prevent line numbers from affecting layout width */
.line-numbers {
    position: relative;
}

/* Prevent inline code from breaking mobile layout */
:not(pre) > code {
    word-break: break-word;
    white-space: normal;
}

div.code-toolbar > .toolbar button.copy-to-clipboard-button[data-copy-state="copy-success"]::before {
    content: "✓ Copied!";
    font-weight: 600;
    font-size: 0.7rem;
}

/* ============================
   Borderless Code Blocks
   ============================ */

/* Remove all borders and outlines from code blocks */
pre[class*="language-"] {
    border: none !important;          /* Remove main border */
    outline: none !important;
}

/* Remove left accent borders (Python / SQL / DAX) */
pre.language-python,
pre.language-sql,
pre.language-dax,
pre:not([class*="language-"]) {
    border-left: none !important;
}