/* ==========================================================================
   CubeLaunch Coming Soon & Embedded Shape Styles v11 - Simplified (No Contain Mode)
   ========================================================================== */

/* --- General --- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%; /* Ensure body can contain content */
    overflow-x: hidden;
    box-sizing: border-box;
    /* background-color set via inline style in PHP */
}
*, *::before, *::after {
    box-sizing: inherit;
}

/* --- Overlay Wrapper --- */
#cubelaunch-coming-soon-overlay {
    width: 100%;
    min-height: 100vh; /* Ensure overlay takes at least viewport height */
    display: flex;
    flex-direction: column;
    align-items: center; /* Center container horizontally */
    justify-content: center; /* Center container vertically */
    padding: 40px 20px; /* Add more vertical padding */
    box-sizing: border-box;
    z-index: 9999;
    position: relative; /* Normal document flow */
    /* background-color set via inline style */
}

/* --- Container for Content --- */
#cubelaunch-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
}

/* --- Text & Form Sections --- */
.cubelaunch-title,
.cubelaunch-about,
.cubelaunch-subscription {
    width: 100%;
    max-width: 800px;
    margin-bottom: 30px; /* Increased spacing */
    box-sizing: border-box;
    text-align: center;
}
.cubelaunch-title h1 { margin: 0; font-size: 2em; font-weight: normal; }
.cubelaunch-about p { font-size: 1em; line-height: 1.6; }

/* Subscription Form */

.cubelaunch-subscription { 
	text-align: left;
}

#subscription-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
}
.cubelaunch-email-input {
    padding: 10px;
    font-size: 1em;
    margin-bottom: 10px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-align: center;
}
.cubelaunch-submit-button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border: none;
    border-radius: 3px;
    width: auto;
    max-width: 100%;
    /* Colors set via inline style */
}
.cubelaunch-thankyou {
    margin-top: 15px;
    font-size: 1em;
    /* Color set via inline style */
}

/* --- Canvas Wrapper --- */
.cubelaunch-main,
.cubelaunch-embedded-shape {
    width: 100%;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
 /* Last element spacing */
#cubelaunch-container > *:last-child { margin-bottom: 0; }


/* --- Canvas Element --- */

/* Rule specific to Coming Soon page canvas BEFORE renaming */
#glcanvas {
    display: block;
    width: 75vmin;
    height: 75vmin;
    min-width: 250px;
    min-height: 250px;
    max-width: 750px;
    max-height: 750px;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    touch-action: none;
    user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* General rule for ALL initialized instances (Shortcode, Block, Coming Soon AFTER rename) */
/* This acts as a base/default size */
canvas[id^="cubelaunch-instance-"] {
    display: block; /* Keep display block */
    /* Default sizing - can be overridden by block presets */
    width: 75vmin;
    height: 75vmin;
    min-width: 250px;
    min-height: 250px;
    max-width: 750px; /* Default max size */
    max-height: 750px;/* Default max size */
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    touch-action: none;
    user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* --- Responsive (Simplified for only non-contained mode) --- */
@media (max-width: 600px) {
    #glcanvas,
    canvas[id^="cubelaunch-instance-"] {
        width: 85vw;
        height: 85vw;
        min-width: 200px;
        min-height: 200px;
        max-width: 90vw;
        max-height: 75vh;
    }
    .cubelaunch-title h1 { font-size: 1.6em; }
    .cubelaunch-about p { font-size: 0.9em; }
    #subscription-form { max-width: 90%; }
}

/* ======================================================== */
/*             CubeLaunch Block Sizing                  */
/* ======================================================== */

/* Target the block wrapper */
.wp-block-cubelaunch-shape,
figure.wp-block-cubelaunch-shape {
    margin-top: 1em;
    margin-bottom: 1em;
    /* Remove margin: auto for centering the block itself */
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* Keep max-width if desired */
    max-width: 90vw;

    /* --- Use Flexbox for internal centering --- */
    display: flex;
    flex-direction: column; /* Stack children (canvas wrapper, figcaption) vertically */
    align-items: center;    /* Center children horizontally within the flex column */
}

/* --- Alignwide / Alignfull overrides --- */
/* These control the wrapper's width/margins */
.wp-block-cubelaunch-shape.alignwide,
figure.wp-block-cubelaunch-shape.alignwide {
    max-width: var(--wp--style--global--wide-size, 1000px);
    /* Add margin:auto back for wide alignment if needed */
     margin-left: auto;
     margin-right: auto;
}
.wp-block-cubelaunch-shape.alignfull,
figure.wp-block-cubelaunch-shape.alignfull {
   max-width: none;
   width: 100%;
   /* No margin:auto needed for full */
   /* margin-left: 0; */
   /* margin-right: 0; */
}


/* --- Size Presets --- */

/* Medium (Default) */
.wp-block-cubelaunch-shape.is-size-medium canvas[id^="cubelaunch-instance-"] {
    width: 60vmin;
    height: 60vmin;
    min-width: 280px;
    min-height: 280px;
    max-width: 600px;
    max-height: 600px;
    aspect-ratio: 1 / 1;
}

/* Small */
.wp-block-cubelaunch-shape.is-size-small canvas[id^="cubelaunch-instance-"] {
    width: 40vmin;
    height: 40vmin;
    min-width: 200px;
    min-height: 200px;
    max-width: 400px;
    max-height: 400px;
    aspect-ratio: 1 / 1;
}

/* Large */
.wp-block-cubelaunch-shape.is-size-large canvas[id^="cubelaunch-instance-"] {
    width: 80vmin;
    height: 80vmin;
    min-width: 350px;
    min-height: 350px;
    max-width: 800px; /* Adjust max size as desired */
    max-height: 800px;/* Adjust max size as desired */
    aspect-ratio: 1 / 1;
}

/* Block Caption Styling (Refined Alignment) */
figure.wp-block-cubelaunch-shape > figcaption.wp-element-caption {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: inherit;
    /* Default to left alignment */
    text-align: left;
}

/* Center align caption ONLY if block is aligncenter OR default (alignnone) */
figure.wp-block-cubelaunch-shape.aligncenter > figcaption.wp-element-caption,
figure.wp-block-cubelaunch-shape:not([class*="align"]) > figcaption.wp-element-caption {
    text-align: center !important; /* Keep !important for center override if needed */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 600px) {
    .wp-block-cubelaunch-shape.is-size-medium canvas[id^="cubelaunch-instance-"],
    .wp-block-cubelaunch-shape.is-size-large canvas[id^="cubelaunch-instance-"] {
        width: 80vw;
        height: 80vw;
        max-width: 90vw;
        max-height: 70vh;
    }
     .wp-block-cubelaunch-shape.is-size-small canvas[id^="cubelaunch-instance-"] {
        width: 60vw;
        height: 60vw;
        max-width: 75vw;
        max-height: 60vh;
        min-width: 150px;
        min-height: 150px;
     }
}



/* Ensure API Key warnings added by JS are visible */
.cubelaunch-api-warning {
    /* display: inline-block; */ /* JS should handle display:none/block */
    color: orange;
    margin-left: 10px;
    font-style: italic;
}
.cubelaunch-api-warning a {
    color: orange;
    text-decoration: underline;
}