/**
 * RocketWeaver Frontend Styles
 * Override WordPress theme styles
 */

/* RocketWeaver Container */
.rocketweaver-page {
    /* Reset */
    all: initial;
    /* Base settings */
    display: block;
    font-family: inherit;
    color: inherit;
    line-height: 1.5;
}

.rocket-page-content {
    display: block;
    width: 100%;
}

/* Heading Reset */
.rocket-heading,
.rocketweaver-heading {
    /* Reset WordPress block editor styles */
    all: unset;
    display: block !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* WordPress Heading Style Override - Increase specificity */
.entry-content .rocketweaver-page h1.rocketweaver-heading,
.entry-content .rocketweaver-page h2.rocketweaver-heading,
.entry-content .rocketweaver-page h3.rocketweaver-heading,
.entry-content .rocketweaver-page h4.rocketweaver-heading,
.entry-content .rocketweaver-page h5.rocketweaver-heading,
.entry-content .rocketweaver-page h6.rocketweaver-heading {
    /* Reset */
    all: unset;
    display: block;

    /* Apply styles using CSS variables */
    text-align: var(--rw-text-align, left);
    color: var(--rw-color, inherit);
    font-size: var(--rw-font-size, 1rem);
    font-weight: var(--rw-font-weight, normal);
    line-height: var(--rw-line-height, 1.5);
    background: var(--rw-background, transparent);
    opacity: var(--rw-opacity, 1);
    margin: var(--rw-margin, 0);
    padding: var(--rw-padding, 0);
    width: auto;
    max-width: 100%;
}

/* Additional styles for background */
.entry-content .rocketweaver-page .rocketweaver-heading.rw-has-background {
    padding: var(--rw-padding, 10px 15px);
    border-radius: 4px;
}

/* Default sizes by heading level */
.entry-content .rocketweaver-page h1.rocketweaver-heading.rw-h1 {
    font-size: var(--rw-font-size, 2.5rem);
}
.entry-content .rocketweaver-page h2.rocketweaver-heading.rw-h2 {
    font-size: var(--rw-font-size, 2rem);
}
.entry-content .rocketweaver-page h3.rocketweaver-heading.rw-h3 {
    font-size: var(--rw-font-size, 1.75rem);
}
.entry-content .rocketweaver-page h4.rocketweaver-heading.rw-h4 {
    font-size: var(--rw-font-size, 1.5rem);
}
.entry-content .rocketweaver-page h5.rocketweaver-heading.rw-h5 {
    font-size: var(--rw-font-size, 1.25rem);
}
.entry-content .rocketweaver-page h6.rocketweaver-heading.rw-h6 {
    font-size: var(--rw-font-size, 1rem);
}

/* Text Component */
.rocket-text {
    display: block;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Image Component */
.rocket-image {
    display: block;
    height: auto;
}

/* Button Component */
.rocket-button {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.rocket-button:hover {
    opacity: 0.8;
}

/* Spacer */
.rocket-spacer {
    display: block;
    width: 100%;
}

/* Divider */
.rocket-divider {
    display: block;
    width: 100%;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* WordPress is-layout class override */
.is-layout-constrained .rocketweaver-page > *,
.is-layout-flow .rocketweaver-page > * {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
}

/* Entry content RocketWeaver content */
.entry-content .rocketweaver-page {
    padding: 0;
}

.entry-content .rocket-heading,
.entry-content .rocket-text,
.entry-content .rocket-image,
.entry-content .rocket-button,
.entry-content .rocket-spacer,
.entry-content .rocket-divider {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Layout Components */
.rocket-layout {
    display: flex;
    width: 100%;
    gap: 20px;
}

.rocket-layout-onecolumn {
    flex-direction: column;
}

.rocket-layout-twocolumns {
    flex-direction: row;
}

.rocket-layout-twocolumns .rocket-layout-zone {
    flex: 1;
}

.rocket-layout-threecolumns {
    flex-direction: row;
}

.rocket-layout-threecolumns .rocket-layout-zone {
    flex: 1;
}

.rocket-layout-fourcolumns {
    flex-direction: row;
}

.rocket-layout-fourcolumns .rocket-layout-zone {
    flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .rocket-layout-twocolumns,
    .rocket-layout-threecolumns,
    .rocket-layout-fourcolumns {
        flex-direction: column;
    }
}

/* Additional rules for increased specificity */
body .entry-content .rocketweaver-page h1.rocketweaver-heading,
body .entry-content .rocketweaver-page h2.rocketweaver-heading,
body .entry-content .rocketweaver-page h3.rocketweaver-heading,
body .entry-content .rocketweaver-page h4.rocketweaver-heading,
body .entry-content .rocketweaver-page h5.rocketweaver-heading,
body .entry-content .rocketweaver-page h6.rocketweaver-heading {
    font-family: inherit;
}

/* Twenty Twenty-One theme compatibility */
.is-layout-constrained > .rocketweaver-page h1.rocketweaver-heading,
.is-layout-constrained > .rocketweaver-page h2.rocketweaver-heading,
.is-layout-constrained > .rocketweaver-page h3.rocketweaver-heading,
.is-layout-constrained > .rocketweaver-page h4.rocketweaver-heading,
.is-layout-constrained > .rocketweaver-page h5.rocketweaver-heading,
.is-layout-constrained > .rocketweaver-page h6.rocketweaver-heading {
    margin-block-start: 0;
    margin-block-end: 0;
}

/* Puck format layout components */
.rocketweaver-layout {
    display: flex;
    width: 100%;
    gap: 20px;
    margin-bottom: 20px;
}

/* Puck format (OneColumnPuck, TwoColumnsPuck, etc) */
.rocketweaver-layout.OneColumnPuck {
    flex-direction: column;
}

.rocketweaver-layout.TwoColumnsPuck,
.rocketweaver-layout.ThreeColumnsPuck,
.rocketweaver-layout.FourColumnsPuck {
    flex-direction: row;
}

/* Basic format (layout1col, layout2col, etc) */
.rocketweaver-layout.layout1col {
    flex-direction: column;
}

.rocketweaver-layout.layout2col,
.rocketweaver-layout.layout3col,
.rocketweaver-layout.layout4col {
    flex-direction: row;
}

.rocketweaver-column {
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .rocketweaver-layout.TwoColumnsPuck,
    .rocketweaver-layout.ThreeColumnsPuck,
    .rocketweaver-layout.FourColumnsPuck,
    .rocketweaver-layout.layout2col,
    .rocketweaver-layout.layout3col,
    .rocketweaver-layout.layout4col {
        flex-direction: column;
    }

    .rocketweaver-column {
        width: 100% !important;
    }
}

/* WordPress Feature Components */
.rw-wp-menu {
    display: flex;
}

.rw-wp-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

/* Horizontal menu */
.rw-wp-menu.rw-menu-horizontal ul {
    flex-direction: row;
    gap: 20px;
}

/* Vertical menu */
.rw-wp-menu.rw-menu-vertical ul {
    flex-direction: column;
    gap: 10px;
}

/* Horizontal alignment */
.rw-wp-menu.rw-align-left ul {
    justify-content: flex-start;
}

.rw-wp-menu.rw-align-center ul {
    justify-content: center;
}

.rw-wp-menu.rw-align-right ul {
    justify-content: flex-end;
}

.rw-wp-menu a {
    text-decoration: none;
    display: block;
    padding: 8px 12px;
}

.rw-wp-menu a:hover {
    opacity: 0.8;
}

/* Recent Posts */
.rw-recent-posts {
    margin-bottom: 20px;
}

.rw-recent-posts.rw-layout-list {
    display: block;
}

.rw-recent-posts.rw-layout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.rw-post-item {
    margin-bottom: 20px;
    overflow: hidden;
}

.rw-post-thumbnail {
    margin-bottom: 10px;
}

.rw-post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

.rw-post-title {
    margin: 10px 0;
    font-size: 1.25rem;
    font-weight: bold;
}

.rw-post-title a {
    text-decoration: none;
    color: inherit;
}

.rw-post-title a:hover {
    opacity: 0.8;
}

.rw-post-meta {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 8px;
}

.rw-post-excerpt {
    margin-top: 8px;
    line-height: 1.6;
}

/* Widget Area */
.rw-widget-area {
    margin-bottom: 20px;
}

.rw-widget-area .widget {
    margin-bottom: 20px;
}

/* Button Component */
.rocketweaver-button {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    background-color: #0073aa;
    color: #fff;
    border-radius: 4px;
    transition: opacity 0.2s ease;
}

.rocketweaver-button:hover {
    opacity: 0.8;
}