/* ========================================
   MOBICIP SINGLE POST TEMPLATE STYLES
   Matches production layout exactly
======================================== */

/* ── RESET (Scoped) ── */
.mobicip-single-page,
.mobicip-single-page *,
.mobicip-single-page ::after,
.mobicip-single-page ::before {
    box-sizing: border-box;
}

/* ── PAGE WRAPPER ── */
.mobicip-single-page {
    width: 100%;
    max-width: 1084px;
    margin: 0 auto;
    padding: 0 20px 80px;
    font-family: 'Manrope', sans-serif;
    color: #111827;
    text-align: left;
}

/* ========================================
   MAIN TWO-COLUMN LAYOUT
======================================== */

.mobicip-content-section {
    padding-top: 40px;
}

.mobicip-content-wrapper {
    width: 100%;
}

.mobicip-content-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* ── LEFT SIDEBAR ── */
.mobicip-sidebar {
    flex: 0 0 250px;
    min-width: 250px;
    align-self: flex-start;
}

.mobicip-sidebar-sticky {
    position: sticky;
    top: 20px;
    z-index: 10;
}

/* Sidebar Banner Image */
.mobicip-sidebar-banner-link {
    display: block;
    text-decoration: none;
}

.mobicip-sidebar-banner-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    transition: opacity 0.2s ease;
}

.mobicip-sidebar-banner-link:hover .mobicip-sidebar-banner-img {
    opacity: 0.9;
}

/* ── ARTICLE AREA ── */
.mobicip-article-wrapper {
    flex: 1;
    min-width: 0;
}

/* ========================================
   ARTICLE HEADER
======================================== */

.mobicip-article-header {
    margin-bottom: 28px;
}

.mobicip-content-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 12px;
    color: #111827;
}

/* Author + Share Row */
.mobicip-author-share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 16px;
}

.mobicip-author-info p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.mobicip-author-link {
    color: #111827;
    font-weight: 600;
    text-decoration: none;
}

.mobicip-author-link:hover {
    color: #3188F4;
    text-decoration: underline;
}

.mobicip-pipe {
    color: #9ca3af;
    margin: 0 4px;
    font-weight: 400;
}

.mobicip-date {
    color: #9ca3af;
    font-size: 13px;
}

/* Share Section */
.mobicip-share-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobicip-share-label {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
}

.mobicip-social-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mobicip-share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
}

.mobicip-share-icon:hover {
    opacity: 0.75;
}

.mobicip-share-icon svg {
    border-radius: 50%;
}

/* ========================================
   ARTICLE CONTENT (Blog body)
======================================== */

.mobicip-article-content {
    font-size: 18px;
    line-height: 1.8;
    color: #374151;
    font-weight: 450;
}

.mobicip-article-content h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    margin: 36px 0 16px;
    color: #111827;
}

.mobicip-article-content h3 {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.35;
    margin: 28px 0 12px;
    color: #111827;
}

.mobicip-article-content h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 24px 0 10px;
    color: #111827;
}

.mobicip-article-content p {
    margin: 0 0 22px;
}

.mobicip-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

.mobicip-article-content a {
    color: #3188F4;
    text-decoration: none;
}

.mobicip-article-content a:hover {
    text-decoration: underline;
}

.mobicip-article-content ul,
.mobicip-article-content ol {
    padding-left: 20px;
    margin: 0 0 24px;
}

.mobicip-article-content li {
    margin-bottom: 18px;
}

.mobicip-article-content blockquote {
    border-left: 4px solid #3188F4;
    padding: 12px 20px;
    margin: 24px 0;
    background: #f0f4ff;
    border-radius: 0 8px 8px 0;
    font-style: italic;
    color: #374151;
}

/* Featured Image inside content */
.mobicip-article-content .wp-post-image,
.mobicip-article-content > figure:first-child img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 28px;
}

/* ── TABLE OF CONTENTS (if using a ToC plugin) ── */
.mobicip-article-content .lwptoc,
.mobicip-article-content .toc,
.mobicip-article-content .wp-block-table-of-contents,
.mobicip-article-content .ez-toc-container {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px 28px;
    margin: 24px 0 32px;
    font-size: 15px;
}

.mobicip-article-content .lwptoc .lwptoc_title,
.mobicip-article-content .ez-toc-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #111827;
}

/* ========================================
   AUTHOR BIO BOX (end of article)
======================================== */

.mobicip-author-details {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-top: 48px;
    padding: 28px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.mobicip-author-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
}

.mobicip-author-bio {
    flex: 1;
}

.mobicip-written-by {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 4px;
}

.mobicip-written-by a {
    color: #111827;
    font-weight: 700;
    text-decoration: none;
}

.mobicip-written-by a:hover {
    color: #3188F4;
}

.mobicip-author-social {
    margin: 8px 0;
}

.mobicip-author-social a {
    display: inline-flex;
}

.mobicip-author-social a:hover {
    opacity: 0.75;
}

.mobicip-author-description {
    font-size: 12px;
    line-height: 1.6;
    color: #4b5563;
    margin: 0;
}

/* ========================================
   TAGS
======================================== */

.mobicip-tags-wrapper {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.mobicip-tags-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    align-self: start;
}

.mobicip-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mobicip-tag-oval {
    display: inline-block;
    padding: 4px 14px;
    background: #f3f4f6;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    transition: background 0.2s ease;
}

.mobicip-tag-oval:hover {
    background: #e5e7eb;
}

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

.mobicip-related-section {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid #e5e7eb;
}

.mobicip-related-inner {
    max-width: 100%;
}

.mobicip-related-heading {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 28px;
    color: #111827;
}

.mobicip-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.mobicip-related-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 20px;
    transition: transform 0.2s ease;
}

.mobicip-related-card:hover {
    transform: translateY(-2px);
}

.mobicip-related-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
}

.mobicip-related-card h3 {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    margin: 14px 0 8px;
    color: #111827;
}

.mobicip-related-excerpt {
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
    margin: 0 0 8px;
    flex-grow: 1;
}

.mobicip-related-date {
    font-size: 13px;
    color: #9ca3af;
}

/* ========================================
   FLOATING BOTTOM CTA
======================================== */

.mobicip-floating-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: transparent;
}

.mobicip-floating-cta a {
    display: block;
}

.mobicip-floating-cta img {
    width: 100%;
    height: auto;
    display: block;
}

.mobicip-cta-close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 0;
}

.mobicip-cta-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* ========================================
   RESPONSIVE — TABLET
======================================== */

@media (max-width: 1024px) {
    .mobicip-single-page {
        max-width: 100%;
        padding: 0 20px 60px;
    }

    .mobicip-content-container {
        gap: 28px;
    }

    .mobicip-sidebar {
        flex: 0 0 220px;
        min-width: 220px;
    }

    .mobicip-content-title {
        font-size: 28px;
    }
}

/* ========================================
   RESPONSIVE — MOBILE
======================================== */

@media (max-width: 768px) {
    .mobicip-single-page {
        padding: 0 16px 40px;
    }

    .mobicip-content-container {
        flex-direction: column;
    }

    /* Hide sidebar on mobile */
    .mobicip-sidebar {
        display: none;
    }

    .mobicip-content-title {
        font-size: 24px;
    }

    .mobicip-author-share-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .mobicip-share-label {
        display: none;
    }

    .mobicip-pipe {
        display: none;
    }

    .mobicip-author-info p {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .mobicip-article-content {
        font-size: 15px;
    }

    .mobicip-article-content h2 {
        font-size: 22px;
    }

    .mobicip-article-content h3 {
        font-size: 19px;
    }

    /* Related Posts: 1 column on mobile */
    .mobicip-related-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mobicip-related-heading {
        font-size: 24px;
    }

    /* Author bio horizontal on mobile */
    .mobicip-author-details {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        padding: 20px;
        gap: 16px;
    }

    .mobicip-tags-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .mobicip-tag-oval {
        display: inline-block;
        width: auto;
        padding: 8px 24px;
        border: 1px solid #d1d5db;
        border-radius: 24px;
    }

    .mobicip-author-description {
        text-align: justify;
    }

    /* Show floating CTA on mobile */
    .mobicip-floating-cta {
        display: block;
    }
}

/* ========================================
   RESPONSIVE — SMALL MOBILE
======================================== */

@media (max-width: 480px) {
    .mobicip-content-title {
        font-size: 22px;
    }
}
/* ========================================
   SQUARE CORNERS ON IMAGERY
   Nothing above this line is modified.

   Production renders the sidebar banner and the article imagery with
   square corners. The exported stylesheet rounds them, which is the
   curved boundary visible on the sidebar ad and the featured image.
   Circles (share icons, author avatar) and pills (tags, form fields)
   are deliberately left alone.
======================================== */

.mobicip-sidebar-banner-img,
.mobicip-article-content img,
.mobicip-article-content .wp-post-image,
.mobicip-article-content > figure:first-child img,
.mobicip-related-card img {
    border-radius: 0;
}

/* ========================================
   SIDEBAR WIDTH + STICKY BANNER (desktop)
   Nothing above the previous marker is modified.

   Production measures the banner at 302.27 x 410.6, so the column is
   302px rather than the 250px in the exported stylesheet. Height stays
   auto so the image keeps its own aspect ratio.

   The banner was also scrolling away. position: sticky was already set
   on .mobicip-sidebar-sticky, but a sticky element can only travel
   within its containing block, and align-self: flex-start collapsed
   .mobicip-sidebar to the banner's own height - leaving zero distance to
   travel. Stretching the column to the full height of the flex row gives
   the banner the whole article to stick through.

   top clears the 80px fixed header rather than the source's 20px, which
   would have tucked the banner underneath it.
======================================== */

@media (min-width: 1025px) {
    .mobicip-sidebar {
        flex: 0 0 302px;
        min-width: 302px;
        align-self: stretch;
    }

    .mobicip-sidebar-sticky {
        position: sticky;
        top: 100px;
    }
}

/* ========================================
   YOUTUBE EMBEDS
   Nothing above this line is modified.

   WordPress stored YouTube embeds as a block whose wrapper holds only
   the video URL; post.hbs turns that into the iframe WordPress used to
   generate. These are WordPress's own aspect-ratio rules for that
   block, so the player sits at 16:9 and scales with the column instead
   of rendering at the iframe's default 300x150.
======================================== */

.mobicip-article-content .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
    position: relative;
}

.mobicip-article-content .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
    content: "";
    display: block;
    padding-top: 56.25%;
}

.mobicip-article-content .wp-block-embed.wp-has-aspect-ratio iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}