/**
 * Page Content & Shortcode Fixes
 * 
 * Ensures third-party plugin shortcodes display correctly
 * in the center of pages, not in the footer.
 *
 * @package Himalayan_Gold
 */

/* ===============================
   Site Main Structure
=============================== */
.site-main {
    min-height: calc(100vh - var(--header-height));
    position: relative;
    z-index: 1;
}

/* ===============================
   Page Content Wrapper
=============================== */
.page-content {
    background: var(--bg-white);
    position: relative;
    z-index: 1;
}

.page-content__wrapper {
    max-width: 100%;
    width: 100%;
    min-height: 300px;
    position: relative;
    z-index: 1;
}

.page-content__article {
    width: 100%;
    position: relative;
}

/* ===============================
   Front Page Content
=============================== */
.front-page-content {
    width: 100%;
    position: relative;
    z-index: 1;
}

.front-page-content .page-content {
    padding: 0;
}

.front-page-content .page-content__wrapper {
    width: 100%;
}

/* ===============================
   Shortcode Container Fix
=============================== */
/* Ensure shortcodes render in main content area */
.page-content__wrapper>*,
.front-page-content>* {
    position: relative;
    z-index: 1;
}

/* Fix for common page builders and shortcode plugins */
.page-content__wrapper .elementor,
.page-content__wrapper .vc_row,
.page-content__wrapper .et_builder_inner_content,
.page-content__wrapper [id*="shortcode"],
.page-content__wrapper .shortcode-wrapper,
.page-content__wrapper .wpb_wrapper {
    position: relative;
    z-index: 1 !important;
    display: block !important;
    width: 100%;
}

/* ===============================
   Page Featured Image
=============================== */
.page-featured-image {
    margin-bottom: var(--space-2xl);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

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

/* ===============================
   Page Links (Multi-page content)
=============================== */
.page-links {
    margin-top: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 2px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.page-links-title {
    font-weight: var(--font-semibold);
    color: var(--text-dark);
    margin-right: var(--space-md);
}

.page-links a,
.page-links>span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-md);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-medium);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-default);
}

.page-links a:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(26, 93, 58, 0.05);
}

.page-links .current {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--text-white);
}

/* ===============================
   Comments Section
=============================== */
.comments-area {
    margin-top: var(--space-4xl);
    padding-top: var(--space-2xl);
    border-top: 2px solid var(--border-light);
}

/* ===============================
   No Content State
=============================== */
.no-content {
    text-align: center;
    padding: var(--space-5xl) var(--space-xl);
    background: var(--bg-cream);
    border-radius: var(--radius-2xl);
}

.no-content h2 {
    font-size: var(--text-3xl);
    color: var(--text-dark);
    margin-bottom: var(--space-md);
}

.no-content p {
    font-size: var(--text-lg);
    color: var(--text-medium);
    max-width: 500px;
    margin: 0 auto;
}

/* ===============================
   Typography in Page Content
=============================== */
.page-content__wrapper h1,
.page-content__wrapper h2,
.page-content__wrapper h3,
.page-content__wrapper h4,
.page-content__wrapper h5,
.page-content__wrapper h6 {
    margin-top: var(--space-xl);
    margin-bottom: var(--space-lg);
    color: var(--text-dark);
}

.page-content__wrapper h1:first-child,
.page-content__wrapper h2:first-child,
.page-content__wrapper h3:first-child {
    margin-top: 0;
}

.page-content__wrapper p {
    margin-bottom: var(--space-lg);
    line-height: var(--line-height-relaxed);
    color: var(--text-medium);
}

.page-content__wrapper ul,
.page-content__wrapper ol {
    margin-bottom: var(--space-lg);
    padding-left: var(--space-xl);
}

.page-content__wrapper li {
    margin-bottom: var(--space-sm);
    line-height: var(--line-height-relaxed);
}

.page-content__wrapper a {
    color: var(--primary);
    text-decoration: underline;
}

.page-content__wrapper a:hover {
    color: var(--primary-dark);
}

.page-content__wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
}

.page-content__wrapper blockquote {
    margin: var(--space-xl) 0;
    padding: var(--space-lg) var(--space-xl);
    border-left: 4px solid var(--primary);
    background: var(--bg-cream);
    border-radius: var(--radius-md);
    font-style: italic;
    color: var(--text-medium);
}

.page-content__wrapper code {
    padding: 2px 6px;
    background: var(--bg-cream);
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'Courier New', monospace;
}

.page-content__wrapper pre {
    padding: var(--space-lg);
    background: var(--bg-dark);
    color: var(--text-white);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: var(--space-lg);
}

.page-content__wrapper pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* ===============================
   Tables
=============================== */
.page-content__wrapper table {
    width: 100%;
    margin-bottom: var(--space-lg);
    border-collapse: collapse;
    border: 1px solid var(--border-light);
}

.page-content__wrapper th,
.page-content__wrapper td {
    padding: var(--space-md);
    text-align: left;
    border: 1px solid var(--border-light);
}

.page-content__wrapper th {
    background: var(--bg-cream);
    font-weight: var(--font-semibold);
    color: var(--text-dark);
}

.page-content__wrapper tr:nth-child(even) {
    background: var(--bg-cream);
}

/* ===============================
   WordPress Alignment Classes
=============================== */
.page-content__wrapper .alignleft {
    float: left;
    margin-right: var(--space-lg);
    margin-bottom: var(--space-md);
}

.page-content__wrapper .alignright {
    float: right;
    margin-left: var(--space-lg);
    margin-bottom: var(--space-md);
}

.page-content__wrapper .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.page-content__wrapper .alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.page-content__wrapper .alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ===============================
   Responsive
=============================== */
@media screen and (max-width: 768px) {
    .page-content {
        padding: var(--space-2xl) 0;
    }

    .page-content__wrapper {
        min-height: 200px;
    }

    .page-content__wrapper .alignleft,
    .page-content__wrapper .alignright {
        float: none;
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    .page-links {
        justify-content: center;
    }
}

/* ===============================
   Fix for Common Plugin Conflicts
=============================== */
/* Contact Form 7 */
.wpcf7 {
    width: 100%;
}

.wpcf7-form {
    display: block;
    position: relative;
}

/* Gravity Forms */
.gform_wrapper {
    width: 100%;
}

/* Elementor */
.elementor-section {
    position: relative;
}

/* WPBakery */
.vc_row {
    position: relative;
}

/* Beaver Builder */
.fl-builder-content {
    position: relative;
}

/* Divi */
.et_builder_inner_content {
    position: relative;
}