/* ==========================================================================
   CubeLaunch Coming Soon & Embedded Shape Styles
   ========================================================================== */

/* Only affect the coming-soon overlay or embedded cube wrapper */
body.cubelaunch-coming-soon-active *,
body.cubelaunch-coming-soon-active *::before,
body.cubelaunch-coming-soon-active *::after,
.cubelaunch-embedded-shape *,
.cubelaunch-embedded-shape *::before,
.cubelaunch-embedded-shape *::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 (DESKTOP ONLY now) ----------------------------------- */
@media (min-width:601px){
    /* 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;
        max-height: 800px;
        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 */
}




/* 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;
}


/* =========================================================
   Mobile sizing + scroll rails (Blocks & Shortcodes)
   - LEFT/RIGHT (X) rails via ::before/::after on the CANVAS HOST
     • Block: .wp-block-cubelaunch-shape .cubelaunch-canvas-wrapper
     • Shortcode fallback: .cubelaunch-embedded-shape
   - TOP/BOTTOM (Y) rails via real elements (.cl-rail-y) injected by
     js/cubelaunch-mobile-rails.js into the same canvas host.
   ========================================================= */

/* Global defaults users/devs can override (PHP "values-only" injector may overwrite these) */
:root{
  --cl-mobile-size-default: 85vw;  /* shortcodes & wrappers with no preset */
  --cl-mobile-size-small:   70vw;
  --cl-mobile-size-medium:  85vw;
  --cl-mobile-size-large:   90vw;

  --cl-rail-width:   20%;  /* LEFT/RIGHT strip size (each side) */
  --cl-rail-height:  16%;  /* TOP/BOTTOM strip size (each edge) */
}

@media (max-width:600px){

  /* 0) Ensure the canvas HOST is positioned for rails */
  body:not(.cubelaunch-coming-soon-active) .wp-block-cubelaunch-shape .cubelaunch-canvas-wrapper,
  body:not(.cubelaunch-coming-soon-active) .cubelaunch-embedded-shape{
    position: relative;
  }

  /* 1) Expose a size var on WRAPPERS (Blocks + Shortcodes) */
  body:not(.cubelaunch-coming-soon-active) .cubelaunch-embedded-shape{
    --cl-mobile-size: var(--cl-mobile-size-default);
  }
  body:not(.cubelaunch-coming-soon-active) .wp-block-cubelaunch-shape.is-size-small{
    --cl-mobile-size: var(--cl-mobile-size-small);
  }
  body:not(.cubelaunch-coming-soon-active) .wp-block-cubelaunch-shape.is-size-medium{
    --cl-mobile-size: var(--cl-mobile-size-medium);
  }
  body:not(.cubelaunch-coming-soon-active) .wp-block-cubelaunch-shape.is-size-large{
    --cl-mobile-size: var(--cl-mobile-size-large);
  }
  /* Fallback for blocks without a size preset */
  body:not(.cubelaunch-coming-soon-active)
  .wp-block-cubelaunch-shape:not(.is-size-small):not(.is-size-medium):not(.is-size-large){
    --cl-mobile-size: var(--cl-mobile-size-default);
  }

  /* 2) Apply the size var to CANVASES (Blocks + Shortcodes) */
  body:not(.cubelaunch-coming-soon-active) canvas[id^="cubelaunch-instance-"]{
    width:      var(--cl-mobile-size);
    height:     var(--cl-mobile-size);
    max-width:  var(--cl-mobile-size);
    max-height: var(--cl-mobile-size);
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 1; /* rails sit above */
  }

  /* 3A) LEFT/RIGHT rails (X) — on the CANVAS HOST to avoid covering captions */

  /* Blocks: host is .cubelaunch-canvas-wrapper */
  body:not(.cubelaunch-coming-soon-active) .wp-block-cubelaunch-shape .cubelaunch-canvas-wrapper::before,
  body:not(.cubelaunch-coming-soon-active) .wp-block-cubelaunch-shape .cubelaunch-canvas-wrapper::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:var(--cl-rail-width);
    z-index:2;
    background:transparent;
    touch-action: pan-y pinch-zoom; /* scroll/pinch pass through */
    pointer-events:auto;            /* actually receive touch */
  }
  body:not(.cubelaunch-coming-soon-active) .wp-block-cubelaunch-shape .cubelaunch-canvas-wrapper::before{ left:0; }
  body:not(.cubelaunch-coming-soon-active) .wp-block-cubelaunch-shape .cubelaunch-canvas-wrapper::after { right:0; }

  /* Shortcodes: no inner wrapper, so fall back to the shortcode wrapper */
  body:not(.cubelaunch-coming-soon-active) .cubelaunch-embedded-shape::before,
  body:not(.cubelaunch-coming-soon-active) .cubelaunch-embedded-shape::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width:var(--cl-rail-width);
    z-index:2;
    background:transparent;
    touch-action: pan-y pinch-zoom;
    pointer-events:auto;
  }
  body:not(.cubelaunch-coming-soon-active) .cubelaunch-embedded-shape::before{ left:0; }
  body:not(.cubelaunch-coming-soon-active) .cubelaunch-embedded-shape::after { right:0; }

  /* 3B) TOP/BOTTOM rails (Y) — real elements injected by JS into the CANVAS HOST */
  .cl-rail-y{
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--cl-rail-height);
    z-index: 2;
    background: transparent;
    touch-action: pan-y pinch-zoom; /* scroll/pinch pass through */
    pointer-events: auto;
  }
  .cl-rail-y--top    { top: 0; }
  .cl-rail-y--bottom { bottom: 0; }

  /* 4) Per‑instance opt‑out helpers */

  /* Turn OFF ALL rails (X + Y) for one instance */
  .cl-rails-off .cubelaunch-canvas-wrapper::before,
  .cl-rails-off .cubelaunch-canvas-wrapper::after,
  .cl-rails-off::before,
  .cl-rails-off::after{ display:none !important; }
  .cl-rails-off .cl-rail-y{ display:none !important; }

  /* Turn OFF only side rails (left/right) */
  .cl-rails-x-off .cubelaunch-canvas-wrapper::before,
  .cl-rails-x-off .cubelaunch-canvas-wrapper::after,
  .cl-rails-x-off::before,
  .cl-rails-x-off::after{ display:none !important; }

  /* Turn OFF only top/bottom rails */
  .cl-rails-y-off .cl-rail-y{ display:none !important; }
}

/* Center shortcode wrappers on desktop too (convenience) */
body:not(.cubelaunch-coming-soon-active) .cubelaunch-embedded-shape{
  width:fit-content;
  margin-inline:auto;
}
@supports not (width:fit-content){
  body:not(.cubelaunch-coming-soon-active) .cubelaunch-embedded-shape{
    display:table;
    margin-inline:auto;
    width:auto;
  }
}
body:not(.cubelaunch-coming-soon-active) .cubelaunch-embedded-shape canvas[id^="cubelaunch-instance-"]{
  display:block;
  margin-inline:auto;
}

/* -------------------------------------------------------------------------
   CubeLaunch Mobile Scroll Rails — quick reference
   --------------------------------------------------------------------------
   - X rails (left/right) live on the CANVAS HOST:
       • Block: .wp-block-cubelaunch-shape .cubelaunch-canvas-wrapper::before/::after
       • Shortcode fallback: .cubelaunch-embedded-shape::before/::after
   - Y rails (top/bottom) are real elements (.cl-rail-y) injected by JS into the CANVAS HOST.
   - Defaults & breakpoints can be changed via the `cubelaunch_mobile_css` PHP filter
     (values-only injector) or by overriding the CSS variables above.
   - Per‑instance: add your class to the wrapper (shortcode `class=""` or
     Block → Advanced → Additional CSS classes) and override:
       --cl-mobile-size, --cl-rail-width, --cl-rail-height
     or use: .cl-rails-off / .cl-rails-x-off / .cl-rails-y-off
   ------------------------------------------------------------------------- */