/**
 * Single Post Template CSS - Mobile-First Approach
 */

/* ============================================
   BASE STYLES - MOBILE FIRST (< 768px)
   ============================================ */

/* Override parent theme's .site-content flex layout */
body.single-post .site-content {
    display: block !important;
    flex-direction: initial !important;
}

/* Container - Mobile First */
.single-post-container {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Breadcrumb */
.breadcrumb {
    font-size: 14px;
    color: #666;
    margin-bottom: 30px;
}

.breadcrumb a {
    color: #666;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: #10b981;
}

.breadcrumb span {
    margin: 0 8px;
    color: #ccc;
}

/* Main Layout: Mobile = Single Column */
.single-post-container .post-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
    width: 100% !important;
}

.single-post-container .post-content,
.single-post-container .post-sidebar {
    width: 100% !important;
    max-width: 100% !important;
}

/* Category Badge */
.category-badge {
    display: inline-block;
    background: #FF8C0B;
    color: white;
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Post Title */
.post-title {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 16px 0;
    letter-spacing: 0.37px;
    color: #3F4333;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Post Meta */
.post-meta {
    font-size: 14px;
    color: #737373;
    line-height: 24px;
    letter-spacing: -0.31px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.post-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.post-meta .meta-item svg {
    flex-shrink: 0;
}

/* Featured Image */
.post-featured-image {
    margin-bottom: 32px;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
}

.post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Post Content Typography */
.post-text {
    font-size: 16px;
    line-height: 1.8;
    color: #3F4333;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.post-text p {
    margin-bottom: 20px;
}

.post-text h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 32px 0 16px 0;
}

.post-text h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 24px 0 16px 0;
}

.post-text h4 {
    font-size: 18px;
    font-weight: 500;
    margin: 20px 0 12px 0;
}

.post-text img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 24px 0;
}

.post-text ul,
.post-text ol {
    margin: 20px 0;
    padding-left: 24px;
}

.post-text li {
    margin-bottom: 8px;
}

.post-text blockquote {
    border-left: 4px solid #10b981;
    background: #f0fdf4;
    padding: 20px 24px;
    margin: 24px 0;
    font-style: italic;
    border-radius: 4px;
}

/* CTA Boxes */
.cta-box {
    padding: 24px;
    border-radius: 12px;
    margin: 32px 0;
    text-align: left;
}

.cta-box h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px 0;
}

.cta-box p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Dark CTA Box */
.cta-dark {
    background: linear-gradient(135deg, #6b7c3f 0%, #8b9c5f 100%);
    color: white;
}

/* Light CTA Box */
.cta-light {
    background: white;
    border: 2px solid #A1BE37;
    text-align: center;
}

/* CTA Buttons - Mobile: Stack Vertically */
.cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
}

.btn-green {
    display: inline-block;
    background: #A1BE37;
    color: white;
    padding: 12px 32px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.btn-green:hover {
    background: #6b7c3f;
}

.btn-white {
    display: inline-block;
    background: white;
    color: #333;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.btn-white:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-outline {
    display: inline-block;
    background: white;
    color: #3F4333;
    border: 2px solid #3F4333;
    padding: 12px 32px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.btn-outline:hover {
    border-color: #8b9c5f;
    color: #8b9c5f;
}

/* Share Social */
.share-social {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 24px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 40px 0;
}

.share-social span {
    font-size: 14px;
    color: #666;
}

.social-icons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.social-icon {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #666;
    transition: all 0.2s;
    border: 1px solid #E5E5E5;
}

.social-icon svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.social-icon:hover {
    background: #10b981;
    color: white;
}

/* ============================================
   SIDEBAR STYLES - MOBILE
   ============================================ */

.single-post-container .post-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
}

/* Base sidebar box */
.sidebar-box {
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    /* Mobile: No sticky */
    position: relative !important;
}

/* Why Choose AIT Box */
.sidebar-why {
    background: #F9F9F9;
    border: 1px solid #E5E5E5;
}

/* Related Research Box */
.sidebar-related {
    background: #ffffff;
    border: 1px solid #E5E5E5;
}

.sidebar-box h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 27px;
    letter-spacing: -0.44px;
    margin: 0 0 20px 0;
    color: #3F4333;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Orange book icon - only for Why Choose AIT */
.sidebar-why h3::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M10 5.83331V17.5" stroke="%23FF8C0B" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/%3E%3Cpath d="M2.50008 15C2.27907 15 2.06711 14.9122 1.91083 14.7559C1.75455 14.5996 1.66675 14.3877 1.66675 14.1667V3.33333C1.66675 3.11232 1.75455 2.90036 1.91083 2.74408C2.06711 2.5878 2.27907 2.5 2.50008 2.5H6.66675C7.5508 2.5 8.39865 2.85119 9.02377 3.47631C9.64889 4.10143 10.0001 4.94928 10.0001 5.83333C10.0001 4.94928 10.3513 4.10143 10.9764 3.47631C11.6015 2.85119 12.4494 2.5 13.3334 2.5H17.5001C17.7211 2.5 17.9331 2.5878 18.0893 2.74408C18.2456 2.90036 18.3334 3.11232 18.3334 3.33333V14.1667C18.3334 14.3877 18.2456 14.5996 18.0893 14.7559C17.9331 14.9122 17.7211 15 17.5001 15H12.5001C11.837 15 11.2012 15.2634 10.7323 15.7322C10.2635 16.2011 10.0001 16.837 10.0001 17.5C10.0001 16.837 9.73669 16.2011 9.26785 15.7322C8.79901 15.2634 8.16312 15 7.50008 15H2.50008Z" stroke="%23FF8C0B" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* Why Choose AIT List */
.why-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.why-list li {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 16px;
    align-items: center;
}

.why-list li .why-badge {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.44px;
    color: #3F4333;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Alternating badge colors */
.why-list li:nth-child(odd) .why-badge {
    background: rgba(255, 140, 11, 0.1);
}

.why-list li:nth-child(even) .why-badge {
    background: rgba(161, 190, 55, 0.1);
}

.why-list li .why-content p:first-child {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.31px;
    color: #3F4333;
    margin: 0 0 2px 0;
}

.why-list li .why-content p:last-child {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.15px;
    color: #808080;
    margin: 0;
}

/* Related Research */
.related-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.related-list li {
    padding: 16px 0;
    border-bottom: 1px solid #eee;
}

.related-list li:last-child {
    border-bottom: none;
}

.related-cat {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 3px;
    margin-bottom: 8px;
}

.related-list h4 {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.related-list a {
    color: #111;
    text-decoration: none;
}

.related-list a:hover {
    color: #10b981;
}

.related-date {
    font-size: 13px;
    color: #999;
}

/* Sidebar Form */
.sidebar-box.sidebar-form {
    background: linear-gradient(180deg, #3F4333 0%, #2A2F24 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 24px !important;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important;
}

.form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.form-icon {
    flex-shrink: 0;
}

.form-header h3 {
    margin: 0 !important;
}

.sidebar-form h3 {
    color: white;
}

.sidebar-form p {
    color: rgba(255, 255, 255, 0.9);
}

.sidebar-form input[type="text"],
.sidebar-form input[type="email"],
.sidebar-form input[type="tel"],
.sidebar-form select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    margin-bottom: 4px;
    box-sizing: border-box;
}

.sidebar-form input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.sidebar-form input[type="submit"] {
    width: 100%;
    background: #A4C639 !important;
    color: #2A2F24 !important;
    font-weight: 700;
    padding: 14px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 20px;
}

.sidebar-form input[type="submit"]:hover {
    background: #8fb030 !important;
}

.form-note {
    font-size: 12px;
    margin-top: 12px;
}

.form-link {
    font-size: 14px;
    text-align: center;
    margin-top: 12px;
}

.form-link a {
    color: white;
    text-decoration: underline;
}

/* Contact Form 7 - Field Spacing */
.sidebar-form .wpcf7-form .form-field {
    margin-bottom: 12px;
}

.sidebar-form .wpcf7-form .form-field p {
    margin-bottom: 8px;
}

.sidebar-form .wpcf7-form .form-field label {
    display: block;
    margin-bottom: 8px;
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.sidebar-form .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
}

/* Hide CF7 spinner */
.sidebar-form .wpcf7-spinner {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sidebar-form .wpcf7-form .form-field br {
    display: none !important;
}

/* ============================================
   RELATED POSTS SECTION
   ============================================ */

.related-posts .container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.related-posts h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #3F4333;
}

.related-posts p {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.31px;
    color: #3F4333;
    margin-bottom: 32px;
}

/* Related Grid - Mobile: Single Column */
.related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

.related-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.related-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.related-content {
    padding: 24px;
}

.card-cat {
    display: inline-block;
    background: #d1fae5;
    color: #065f46;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.related-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 12px 0;
}

.related-card h3 a {
    color: #111;
    text-decoration: none;
}

.related-card h3 a:hover {
    color: #10b981;
}

.related-card p {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px;
}

.card-date {
    font-size: 13px;
    color: #999;
}

/* ============================================
   TABLET STYLES (min-width: 768px)
   ============================================ */

@media (min-width: 768px) {
    .post-title {
        font-size: 32px;
    }

    .post-text {
        font-size: 17px;
    }

    .post-text h2 {
        font-size: 28px;
    }

    .post-text h3 {
        font-size: 22px;
    }

    .cta-box {
        padding: 32px;
    }

    .cta-box h3 {
        font-size: 22px;
    }

    /* CTA Buttons: Side by side on tablet */
    .cta-buttons {
        flex-direction: row;
    }

    .btn-green,
    .btn-white,
    .btn-outline {
        width: auto;
        min-width: 200px;
    }

    /* Related Grid: 2 columns on tablet */
    .related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }

    .related-posts h2 {
        font-size: 32px;
    }

    .sidebar-box {
        padding: 25px;
    }
}

/* ============================================
   DESKTOP STYLES (min-width: 1024px)
   ============================================ */

@media (min-width: 1024px) {

    /* Container max-width on desktop */
    .single-post-container {
        max-width: 1200px !important;
    }

    /* 2-Column Layout for Desktop */
    .single-post-container .post-layout {
        display: grid !important;
        grid-template-columns: 2fr 1fr !important;
        gap: 40px !important;
        align-items: stretch !important;
        min-height: 100vh;
    }

    .single-post-container .post-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .single-post-container .post-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Sticky Form on Desktop */
    .sidebar-box.sidebar-form {
        position: sticky !important;
        top: 80px !important;
        align-self: flex-start !important;
        z-index: 100 !important;
    }

    /* Remove mobile margin-bottom */
    .sidebar-box {
        margin-bottom: 0;
    }

    .post-title {
        font-size: 36px;
        line-height: 45px;
    }

    .post-text h2 {
        font-size: 32px;
        margin: 40px 0 20px 0;
    }

    .post-text h3 {
        font-size: 24px;
        margin: 32px 0 16px 0;
    }

    .post-text h4 {
        font-size: 20px;
        margin: 24px 0 16px 0;
    }

    .cta-box {
        padding: 40px;
    }

    .cta-box h3 {
        font-size: 24px;
    }

    /* Related Grid: 3 columns on desktop */
    .related-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }

    .related-posts .container {
        max-width: 1200px;
    }

    .related-posts h2 {
        font-size: 36px;
    }

    .related-posts p {
        margin-bottom: 40px;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

* {
    box-sizing: border-box;
}

/* Prevent horizontal overflow */
.single-post-container,
.single-post-container * {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

img {
    max-width: 100%;
    height: auto;
}