/*
 Theme Name:   MPAA Blog
 Theme URI:    https://multipagepro.com/blog
 Description:  Child theme of Twenty Twenty-Five for the MPAA Blog
 Author:       MultiPagePro
 Author URI:   https://multipagepro.com
 Template:     twentytwentyfive
 Version:      2.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  mpaa-blog
*/

/* ==========================================================================
   Google Fonts Import
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&display=swap');

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
    --mpaa-primary: #5E17EB;
    --mpaa-primary-dark: #4a10c1;
    --mpaa-primary-light: #f3f0ff;
    --mpaa-dark-navy: #1D1844;
    --mpaa-dark-navy-light: #2a2460;
    --mpaa-text: #333333;
    --mpaa-text-light: #666666;
    --mpaa-border: #e0e0e0;
    --mpaa-white: #ffffff;
    --mpaa-off-white: #f9f9fb;
    --mpaa-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --mpaa-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.14);
    --mpaa-radius: 8px;
    --mpaa-transition: 0.3s ease;
}

/* ==========================================================================
   Base Typography & Body
   ========================================================================== */

body {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--mpaa-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--mpaa-dark-navy);
    font-weight: 700;
    line-height: 1.3;
}

/* ==========================================================================
   Link Colors
   ========================================================================== */

a {
    color: var(--mpaa-primary);
    text-decoration: none;
    transition: color var(--mpaa-transition);
}

a:hover,
a:focus {
    color: var(--mpaa-primary-dark);
    text-decoration: underline;
}

/* ==========================================================================
   Header Bar
   ========================================================================== */

.mpaa-header-bar {
    background-color: var(--mpaa-dark-navy);
    position: sticky;
    top: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* Admin bar offset when logged in */
.admin-bar .mpaa-header-bar {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .mpaa-header-bar {
        top: 46px;
    }
}

/* ==========================================================================
   Logo
   ========================================================================== */

.mpaa-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.mpaa-logo img {
    height: 36px;
    width: auto;
}

.mpaa-logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.mpaa-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mpaa-nav a {
    color: var(--mpaa-white);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 14px;
    border-radius: 4px;
    transition: background-color var(--mpaa-transition), color var(--mpaa-transition);
    text-decoration: none;
    white-space: nowrap;
}

.mpaa-nav a:hover,
.mpaa-nav a:focus {
    background-color: var(--mpaa-dark-navy-light);
    color: var(--mpaa-white);
    text-decoration: none;
}

.mpaa-nav a.mpaa-cta {
    background-color: var(--mpaa-primary);
    color: var(--mpaa-white);
    border-radius: 6px;
    padding: 8px 20px;
}

.mpaa-nav a.mpaa-cta:hover,
.mpaa-nav a.mpaa-cta:focus {
    background-color: var(--mpaa-primary-dark);
}

/* ==========================================================================
   Mobile Responsive Header
   ========================================================================== */

@media screen and (max-width: 768px) {
    .mpaa-header-bar {
        padding: 0 16px;
        height: 56px;
    }

    .mpaa-nav {
        gap: 4px;
    }

    .mpaa-nav a {
        font-size: 11px;
        padding: 6px 10px;
    }

    .mpaa-nav a.mpaa-cta {
        padding: 6px 14px;
    }

    .mpaa-logo img {
        height: 28px;
    }
}

@media screen and (max-width: 480px) {
    .mpaa-nav a {
        font-size: 10px;
        padding: 5px 8px;
        letter-spacing: 0.3px;
    }
}

/* ==========================================================================
   Hide Footer & Site Title Block
   ========================================================================== */

footer.wp-block-template-part,
footer.wp-block-template-part *,
.wp-block-template-part.site-footer,
.wp-block-template-part.site-footer * {
    display: none !important;
}

.wp-block-site-title {
    display: none !important;
}

/* ==========================================================================
   Button Styles
   ========================================================================== */

.wp-block-button__link {
    background-color: var(--mpaa-primary);
    color: var(--mpaa-white);
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    border-radius: 6px;
    padding: 12px 28px;
    transition: background-color var(--mpaa-transition), transform var(--mpaa-transition);
    border: none;
    cursor: pointer;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
    background-color: var(--mpaa-primary-dark);
    color: var(--mpaa-white);
    transform: translateY(-1px);
    text-decoration: none;
}

/* ==========================================================================
   Blog Post Title Links
   ========================================================================== */

.wp-block-post-title a,
h1.wp-block-post-title a,
h2.wp-block-post-title a {
    color: var(--mpaa-dark-navy);
    text-decoration: none;
    transition: color var(--mpaa-transition);
}

.wp-block-post-title a:hover,
.wp-block-post-title a:focus {
    color: var(--mpaa-primary);
    text-decoration: none;
}

/* ==========================================================================
   SEO Content Typography - Long-form Reading Improvements
   ========================================================================== */

.entry-content,
.wp-block-post-content {
    font-size: 17px;
    line-height: 1.8;
    color: var(--mpaa-text);
}

@media screen and (min-width: 768px) {
    .entry-content,
    .wp-block-post-content {
        font-size: 18px;
    }
}

/* Heading Hierarchy Spacing */
.entry-content h2,
.wp-block-post-content h2 {
    margin-top: 2.5em;
    margin-bottom: 0.75em;
    font-size: 1.75em;
    border-bottom: 2px solid var(--mpaa-primary-light);
    padding-bottom: 0.3em;
}

.entry-content h3,
.wp-block-post-content h3 {
    margin-top: 2em;
    margin-bottom: 0.6em;
    font-size: 1.4em;
}

.entry-content h4,
.wp-block-post-content h4 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-size: 1.15em;
}

/* Paragraph Spacing */
.entry-content p,
.wp-block-post-content p {
    margin-bottom: 1.4em;
}

/* ==========================================================================
   Image Styling in Posts
   ========================================================================== */

.entry-content img,
.wp-block-post-content img {
    border-radius: var(--mpaa-radius);
    box-shadow: var(--mpaa-shadow);
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    height: auto;
}

.entry-content .wp-block-image,
.wp-block-post-content .wp-block-image {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.entry-content .wp-block-image figcaption,
.wp-block-post-content .wp-block-image figcaption {
    font-size: 14px;
    color: var(--mpaa-text-light);
    text-align: center;
    margin-top: 0.5em;
    font-style: italic;
}

/* ==========================================================================
   Blockquote Styling
   ========================================================================== */

.entry-content blockquote,
.wp-block-post-content blockquote,
.wp-block-quote {
    border-left: 4px solid var(--mpaa-primary);
    background-color: var(--mpaa-primary-light);
    padding: 1.2em 1.5em;
    margin: 1.5em 0;
    border-radius: 0 var(--mpaa-radius) var(--mpaa-radius) 0;
    font-style: italic;
    color: var(--mpaa-dark-navy);
}

.entry-content blockquote p:last-child,
.wp-block-post-content blockquote p:last-child,
.wp-block-quote p:last-child {
    margin-bottom: 0;
}

.entry-content blockquote cite,
.wp-block-post-content blockquote cite,
.wp-block-quote cite {
    display: block;
    font-size: 14px;
    color: var(--mpaa-text-light);
    margin-top: 0.8em;
    font-style: normal;
    font-weight: 700;
}

/* ==========================================================================
   Table Styling
   ========================================================================== */

.entry-content table,
.wp-block-post-content table,
.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 16px;
    border-radius: var(--mpaa-radius);
    overflow: hidden;
    box-shadow: var(--mpaa-shadow);
}

.entry-content table thead th,
.wp-block-post-content table thead th,
.wp-block-table table thead th {
    background-color: var(--mpaa-dark-navy);
    color: var(--mpaa-white);
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.entry-content table tbody td,
.wp-block-post-content table tbody td,
.wp-block-table table tbody td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--mpaa-border);
}

.entry-content table tbody tr:nth-child(even),
.wp-block-post-content table tbody tr:nth-child(even),
.wp-block-table table tbody tr:nth-child(even) {
    background-color: var(--mpaa-off-white);
}

.entry-content table tbody tr:hover,
.wp-block-post-content table tbody tr:hover,
.wp-block-table table tbody tr:hover {
    background-color: var(--mpaa-primary-light);
}

/* Responsive Table */
@media screen and (max-width: 768px) {
    .entry-content table,
    .wp-block-post-content table,
    .wp-block-table table {
        font-size: 14px;
    }

    .entry-content table thead th,
    .wp-block-post-content table thead th,
    .wp-block-table table thead th,
    .entry-content table tbody td,
    .wp-block-post-content table tbody td,
    .wp-block-table table tbody td {
        padding: 8px 10px;
    }
}

/* ==========================================================================
   Code Block Styling
   ========================================================================== */

.entry-content code,
.wp-block-post-content code {
    background-color: var(--mpaa-off-white);
    border: 1px solid var(--mpaa-border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.9em;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    color: var(--mpaa-primary-dark);
}

.entry-content pre,
.wp-block-post-content pre,
.wp-block-code {
    background-color: #1e1e2e;
    color: #cdd6f4;
    border-radius: var(--mpaa-radius);
    padding: 1.2em 1.5em;
    margin: 1.5em 0;
    overflow-x: auto;
    font-size: 15px;
    line-height: 1.6;
    box-shadow: var(--mpaa-shadow);
}

.entry-content pre code,
.wp-block-post-content pre code,
.wp-block-code code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* ==========================================================================
   List Styling in Posts
   ========================================================================== */

.entry-content ul,
.entry-content ol,
.wp-block-post-content ul,
.wp-block-post-content ol {
    margin-bottom: 1.4em;
    padding-left: 1.5em;
}

.entry-content li,
.wp-block-post-content li {
    margin-bottom: 0.4em;
    line-height: 1.7;
}

/* ==========================================================================
   FAQ Accordion Styles
   ========================================================================== */

.mpaa-faq {
    margin: 2em 0;
    border-radius: var(--mpaa-radius);
}

.mpaa-faq-item {
    margin-bottom: 8px;
    border-radius: var(--mpaa-radius);
    overflow: hidden;
}

.mpaa-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: var(--mpaa-primary-light);
    border: none;
    border-left: 3px solid var(--mpaa-primary);
    padding: 16px 20px;
    border-radius: var(--mpaa-radius);
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--mpaa-dark-navy);
    text-align: left;
    line-height: 1.4;
    transition: background-color var(--mpaa-transition);
}

.mpaa-faq-question:hover,
.mpaa-faq-question:focus {
    background-color: #e8e0ff;
    outline: none;
}

/* Arrow indicator */
.mpaa-faq-question::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--mpaa-primary);
    border-bottom: 2px solid var(--mpaa-primary);
    transform: rotate(45deg);
    transition: transform var(--mpaa-transition);
    flex-shrink: 0;
    margin-left: 16px;
}

/* Arrow rotates when FAQ is open */
.mpaa-faq-item.open .mpaa-faq-question::after {
    transform: rotate(-135deg);
}

.mpaa-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
    background-color: var(--mpaa-white);
    padding: 0 20px;
    border-left: 3px solid var(--mpaa-primary-light);
    margin-left: 0;
}

.mpaa-faq-item.open .mpaa-faq-answer {
    max-height: 1000px;
    padding: 16px 20px;
}

.mpaa-faq-answer p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Related Articles Section
   ========================================================================== */

.mpaa-related {
    margin: 3em 0 2em;
    padding: 2em 0;
    border-top: 2px solid var(--mpaa-border);
}

.mpaa-related h3 {
    font-size: 1.5em;
    color: var(--mpaa-dark-navy);
    margin-bottom: 1em;
    text-align: center;
}

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

@media screen and (max-width: 992px) {
    .mpaa-related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 600px) {
    .mpaa-related-grid {
        grid-template-columns: 1fr;
    }
}

.mpaa-related-card {
    background-color: var(--mpaa-white);
    border: 1px solid var(--mpaa-border);
    border-radius: var(--mpaa-radius);
    padding: 20px;
    transition: box-shadow var(--mpaa-transition), transform var(--mpaa-transition);
}

.mpaa-related-card:hover {
    box-shadow: var(--mpaa-shadow-hover);
    transform: translateY(-2px);
}

.mpaa-related-title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--mpaa-dark-navy);
    margin-bottom: 8px;
    line-height: 1.4;
    text-decoration: none;
    transition: color var(--mpaa-transition);
}

.mpaa-related-title:hover,
.mpaa-related-title:focus {
    color: var(--mpaa-primary);
    text-decoration: none;
}

.mpaa-related-excerpt {
    font-size: 14px;
    color: var(--mpaa-text-light);
    line-height: 1.6;
    margin-bottom: 10px;
}

.mpaa-related-date {
    font-size: 12px;
    color: #999999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

/* ==========================================================================
   Table of Contents
   ========================================================================== */

.mpaa-toc {
    background-color: var(--mpaa-off-white);
    border: 1px solid var(--mpaa-border);
    border-left: 4px solid var(--mpaa-primary);
    border-radius: 0 var(--mpaa-radius) var(--mpaa-radius) 0;
    padding: 20px 24px;
    margin: 1.5em 0 2em;
}

/* When used as sticky sidebar TOC */
@media screen and (min-width: 1200px) {
    .mpaa-toc.mpaa-toc--sidebar {
        position: sticky;
        top: 80px;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }

    .admin-bar .mpaa-toc.mpaa-toc--sidebar {
        top: 112px;
    }
}

.mpaa-toc-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mpaa-dark-navy);
    margin-bottom: 12px;
}

.mpaa-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mpaa-toc li {
    margin-bottom: 6px;
}

.mpaa-toc li li {
    margin-left: 16px;
}

.mpaa-toc a {
    color: var(--mpaa-text);
    font-size: 15px;
    text-decoration: none;
    display: block;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color var(--mpaa-transition), color var(--mpaa-transition);
    scroll-behavior: smooth;
}

.mpaa-toc a:hover,
.mpaa-toc a:focus {
    background-color: var(--mpaa-primary-light);
    color: var(--mpaa-primary);
    text-decoration: none;
}

.mpaa-toc a.active {
    background-color: var(--mpaa-primary-light);
    color: var(--mpaa-primary);
    font-weight: 700;
}

/* Enable smooth scrolling site-wide for TOC anchor links */
html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   Breadcrumb Styling
   ========================================================================== */

.mpaa-breadcrumbs {
    font-size: 14px;
    color: var(--mpaa-text-light);
    padding: 12px 0;
    margin-bottom: 1em;
    line-height: 1.5;
}

.mpaa-breadcrumbs a {
    color: var(--mpaa-primary);
    text-decoration: none;
    transition: color var(--mpaa-transition);
}

.mpaa-breadcrumbs a:hover,
.mpaa-breadcrumbs a:focus {
    color: var(--mpaa-primary-dark);
    text-decoration: underline;
}

.mpaa-breadcrumbs .separator {
    display: inline-block;
    margin: 0 6px;
    color: #cccccc;
    font-size: 12px;
}

.mpaa-breadcrumbs .current {
    color: var(--mpaa-text);
    font-weight: 700;
}

/* ==========================================================================
   Horizontal Rule
   ========================================================================== */

.entry-content hr,
.wp-block-post-content hr,
.wp-block-separator {
    border: none;
    height: 2px;
    background: linear-gradient(to right, var(--mpaa-primary-light), var(--mpaa-primary), var(--mpaa-primary-light));
    margin: 2em 0;
    border-radius: 1px;
}

/* ==========================================================================
   Selection Color
   ========================================================================== */

::selection {
    background-color: var(--mpaa-primary);
    color: var(--mpaa-white);
}

::-moz-selection {
    background-color: var(--mpaa-primary);
    color: var(--mpaa-white);
}

/* ==========================================================================
   Focus & Accessibility
   ========================================================================== */

*:focus-visible {
    outline: 2px solid var(--mpaa-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    /* Hide non-content elements */
    .mpaa-header-bar,
    .mpaa-nav,
    .mpaa-breadcrumbs,
    .mpaa-toc,
    .mpaa-related,
    .mpaa-faq-question::after,
    footer.wp-block-template-part,
    .wp-block-template-part.site-footer,
    .wp-block-navigation,
    nav,
    .wp-block-button,
    #wpadminbar {
        display: none !important;
    }

    /* Show all FAQ answers when printing */
    .mpaa-faq-answer {
        max-height: none !important;
        padding: 12px 20px !important;
        overflow: visible !important;
    }

    /* Reset body and content for print */
    body {
        font-size: 12pt;
        line-height: 1.6;
        color: #000000;
        background: #ffffff;
    }

    a {
        color: #000000;
        text-decoration: underline;
    }

    /* Show link URLs in print */
    .entry-content a[href]::after,
    .wp-block-post-content a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #555555;
        font-style: italic;
    }

    /* Don't show URL for anchor links or javascript */
    .entry-content a[href^="#"]::after,
    .wp-block-post-content a[href^="#"]::after,
    .entry-content a[href^="javascript"]::after,
    .wp-block-post-content a[href^="javascript"]::after {
        content: '';
    }

    /* Prevent page breaks inside elements */
    .mpaa-faq-item,
    .mpaa-related-card,
    blockquote,
    table,
    img {
        page-break-inside: avoid;
    }

    h2, h3 {
        page-break-after: avoid;
    }

    /* Remove shadows and decorative borders in print */
    img {
        box-shadow: none !important;
    }

    table {
        box-shadow: none !important;
    }
}