/**
 * Creator Blocks - Base Styles
 *
 * Structural and layout styles that are always needed.
 * This file is NOT overwritten by the design system generator.
 */

/* ==========================================================================
   WordPress Full-Width Alignment
   ========================================================================== */

/* Make alignfull break out of any constrained/flow layout */
.alignfull {
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
}

/* Ensure content within full-width sections is centered */
.alignfull > .container,
.alignfull > .wp-block-creator-container:not(.alignfull) {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Navbar: inner flex container needs width:100% to make space-between work.
   Without this, mx-auto containers shrink to content width.
   Use > to only target DIRECT child, not nested flex containers. */
nav > .wp-block-creator-flex {
    width: 100%;
}

/* Navbar fallback: constrain content width while keeping background full-width */
nav.alignfull.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    padding-left: max(1.5rem, calc((100% - 1200px) / 2 + 1.5rem));
    padding-right: max(1.5rem, calc((100% - 1200px) / 2 + 1.5rem));
}

/* ==========================================================================
   Base Reset & Box Sizing
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

/* Reset WordPress theme default spacing on main content area */
main,
.wp-site-blocks,
.entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure body has no default margin */
body {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Prevent Horizontal Overflow from 100vw Elements
   ==========================================================================

   When using width: 100vw (for .alignfull sections), the viewport width
   includes the scrollbar, but the content area doesn't. This causes a
   horizontal scrollbar to appear. Adding overflow-x: hidden to both html
   and body prevents this issue while preserving the full-width appearance.

   This is a standard fix used by Tailwind, Bootstrap, and other frameworks.
   ========================================================================== */

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

/* ==========================================================================
   Icon Sizing
   ========================================================================== */

.wp-block-creator-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    flex-shrink: 0;
}

.wp-block-creator-icon svg {
    width: 100%;
    height: 100%;
}

.wp-block-creator-icon .icon {
    width: 100%;
    height: 100%;
}

/* Icon size variants */
.icon-sm { width: 1rem; height: 1rem; }
.icon-md { width: 1.5rem; height: 1.5rem; }
.icon-lg { width: 2rem; height: 2rem; }
.icon-xl { width: 3rem; height: 3rem; }
.icon-2xl { width: 4rem; height: 4rem; }