/*
Theme Name: Ishaan Arjun - Personal Portfolio
Theme URI: https://ishaanarjun.dev
Author: Ishaan Arjun
Author URI: https://ishaanarjun.dev
Description: Premium, ultra-modern personal portfolio WordPress theme for Ishaan Arjun with interactive 3D Surface Shader canvas background, dynamic typing hero, animated counters, custom services, filterable portfolio with multimedia popups, Slick testimonials slider, brand marquee, interactive resume with education/experience/top circular skill bars/design tools/awards, courses & certifications, pricing plans, regular dynamic blog, and AJAX contact form.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ishaan-arjun
Tags: portfolio, custom-background, full-width-template, grid-layout, one-column, theme-options, translation-ready
*/

/* Include the base style from assets */
@import url('assets/css/style.css');

/* Custom Course & Certification Badges Styling */
.cert-section-main {
    margin-top: 45px;
    padding-top: 35px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 25px;
}
.cert-card {
    background: #FFFFFF;
    border: 1px solid #E6E8EC;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}
.cert-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
    border-color: #BCE70C;
}
.cert-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #BCE70C;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cert-card:hover::before {
    opacity: 1;
}
.cert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.cert-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #F4F6F8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.cert-year {
    font-size: 13px;
    font-weight: 600;
    color: #555555;
    background: #EDF0F4;
    padding: 4px 10px;
    border-radius: 20px;
}
.cert-title {
    font-size: 18px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 6px;
    line-height: 1.35;
}
.cert-issuer {
    font-size: 14px;
    font-weight: 500;
    color: #666666;
    margin-bottom: 14px;
}
.cert-verify-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #111111;
    text-decoration: none;
    transition: color 0.2s ease;
    border-top: 1px solid #F0F2F5;
    padding-top: 12px;
    width: 100%;
}
.cert-verify-link:hover {
    color: #00885a;
}
.cert-verify-link svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Single Blog Post Template Enhancements */
.single-blog-article {
    background: #FFFFFF;
    border: 1px solid #E6E8EC;
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 40px;
}
.single-blog-article img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    margin-bottom: 25px;
}
.single-blog-article h1 {
    font-size: 32px;
    font-weight: 800;
    color: #111111;
    margin-bottom: 18px;
    line-height: 1.3;
}
.single-blog-meta {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #EEE;
    font-size: 14px;
    color: #666;
}
.single-blog-content {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
}
.single-blog-content p {
    margin-bottom: 20px;
}
.single-blog-content h2,
.single-blog-content h3 {
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 700;
    color: #111;
}

/* Contact Form Feedback Alerts */
.contact-form-message {
    display: none;
    padding: 14px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 600;
}
.contact-form-message.success {
    display: block;
    background: #E8F8F0;
    color: #0E7B46;
    border: 1px solid #B8EAD0;
}
.contact-form-message.error {
    display: block;
    background: #FEECEB;
    color: #C5221F;
    border: 1px solid #F8C3C1;
}

/* Admin bar spacing fix */
.admin-bar #mainHeader {
    top: 32px;
}
@media screen and (max-width: 782px) {
    .admin-bar #mainHeader {
        top: 46px;
    }
}