/* 
  Global Design Utilities
  Available site-wide for all patterns and templates.
  These provide the foundational layout and component styles.
*/

/* 
  Note: Removed universal '*' reset as it interferes with parent theme spacing.
  We use targeted resets instead.
*/

.product-page-wrapper *,
.landing-page-wrapper *,
.about-us-wrapper *,
.blog-post-wrapper *,
.peptide-beacon-wrapper *,
.wp-block-group.is-style-hero-section *,
.wp-block-group.is-style-contact-section *,
.wp-block-group.is-style-cta-section *,
.wp-block-group.is-style-footer-beacon *,
.wp-block-group.is-style-product-best-sellers *,
.wp-block-group.is-style-header-top-bar-variant-a *,
.wp-block-group.is-style-research-archive *,
.wp-block-group.is-style-sidebar-v1 *,
.wp-block-group.is-style-peptide-beacon-hero * {
    box-sizing: border-box;
}

.peptide-beacon-wrapper,
.catalog-page-wrapper,
.product-page-wrapper,
.landing-page-wrapper,
.standard-page-wrapper,
.about-us-wrapper,
.blog-post-wrapper {
    font-family: var(--font-satoshi);
    color: var(--text-main);
    background-color: #ffffff;
    line-height: 1.5;
}

/* Force white background on common FSE blocks if parent theme is dark */
body, .wp-site-blocks {
    background-color: #ffffff !important;
}

.peptide-beacon-wrapper img,
.catalog-page-wrapper img,
.product-page-wrapper img,
.landing-page-wrapper img {
    max-width: 100%;
    display: block;
}

/* Typography Defaults - Scoped to our wrappers to avoid breaking other templates */
.peptide-beacon-wrapper h1, .peptide-beacon-wrapper h2, .peptide-beacon-wrapper h3, 
.peptide-beacon-wrapper h4, .peptide-beacon-wrapper h5, .peptide-beacon-wrapper h6,
.catalog-page-wrapper h1, .catalog-page-wrapper h2, .catalog-page-wrapper h3,
.product-page-wrapper h1, .product-page-wrapper h2, .product-page-wrapper h3,
.landing-page-wrapper h1, .landing-page-wrapper h2, .landing-page-wrapper h3,
.about-us-wrapper h1, .about-us-wrapper h2, .about-us-wrapper h3,
.blog-post-wrapper h1, .blog-post-wrapper h2, .blog-post-wrapper h3 {
    font-weight: 700;
    line-height: 1.2;
}

/* Container System */
.container {
    box-sizing: border-box;
    max-width: var(--container-max-width, 1440px);
    margin: 0 auto;
    padding: 0 72px;
    width: 100%;
}

@media (max-width: 1024px) {
    .container {
        padding: 0 40px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 20px;
    }
}

/* Shared Section Utilities */


.section-title {
    font-size: 48px;
    margin-bottom: 50px;
    color: var(--text-main);
}

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

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.text-center {
    text-align: center;
}

/* Button Component */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
}

.btn-primary {
    background: var(--gradient-teal);
    color: white;
}

.btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.btn-white {
    background: white;
    color: var(--primary-teal);
}

.btn-full {
    width: 100%;
}

/* Standard Page template background - handled by global rules above */

/* 
  Block Gap Reset (Mobile Only)
  WordPress adds margin-top (block gap) between top-level blocks in flow layout.
  We remove this on mobile to eliminate "white bars" while preserving desktop spacing.
*/
@media (max-width: 1024px) {
    .wp-site-blocks > * + .is-style-hero-section,
    .wp-site-blocks > * + .is-style-peptide-beacon-hero,
    .wp-site-blocks > * + .is-style-landing-page-hero,
    .wp-site-blocks > * + .is-style-product-hero,
    .wp-site-blocks > * + .is-style-catalog-page-content,
    .wp-site-blocks > * + .wp-block-template-part,
    .wp-site-blocks > * + .is-style-navbar-variant-a,
    .wp-site-blocks > * + .is-style-header-navbar-variant-a,
    .wp-site-blocks > * + .is-style-landing-page-header,
    .wp-site-blocks > * + .about-us-wrapper {
        margin-block-start: 0 !important;
        margin-top: 0 !important;
    }
    .is-style-header-top-bar-variant-a .top-bar {
        margin-bottom: 0 !important;
    }
}

/* Blog Layout Grid */
.blog-layout-grid {
    margin-top: 40px !important;
    margin-bottom: 80px !important;
    gap: 0 !important; /* Managed by column padding */
}

@media (max-width: 1024px) {
    .blog-layout-grid {
        flex-direction: column !important;
    }
    .blog-layout-grid > .wp-block-column {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}