/*
Theme Name: JHL Theme
Description: A custom theme for JHL.
Template: twentytwentyfive
Version: 1.0
*/
/* Ensure column contents stack vertically and fill space */

/* there are some annoying forced-margins in the editor when selecting a group out of the box, just set them to zero (non-important allows override at block level) */
[data-type="core/group"].is-selected .has-background .block-list-appender {
  margin-bottom: 0px;
  margin-top: 0px;
}

/* main column container fix */
/* align-self: stretch; required on main column for bottom float, but we can asign that in editor */

/* THIS SHOULD probably target the blocktype directly instead of being a class we apply to things.  If we can make a plugin that allows setting to flex, that flex setting could impos all of this */
/* at minimum we should probably rename this class as this is a default class and we'd want one we set ourselves most likely */
/* we'd want to disable functionality if parent was a grid or anything that is NOT FLEX */
.flex-column,
.wp-block-column,
.wp-block-group > .is-layout-flow {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* don't neccesarily need here for everything, but can't imagine a scenerio I wouldn't want it */
  flex-basis: min-content; /* this is required to make flex-grow work properly.  0 will set it to super thin by default, so min-content is a little safer */
}

.flex-row {
  display: flex;
  flex-direction: row;
  overflow: hidden; /* don't neccesarily need here for everything, but can't imagine a scenerio I wouldn't want it */
  flex-basis: min-content; /* this is required to make flex-grow work properly.  0 will set it to super thin by default, so min-content is a little safer */
}

/* if we can't get plugin going, a simple flex grow of 1 will at least auto-height a block */
.flex-grow {
  flex-grow: 1;
}

.flex-basis {
  flex-basis: min-content;
}

/* easy way to enable overflow-hidden on block level elements in guttenberg editor */
.overflow-hidden {
  overflow: hidden;
}

/* Ensure images are responsive - if we use premium-image feature this allows it to respect*/
.full-width,
.full-width-image,
.full-width-image .premium-image-wrap,
.full-width-image img {
  width: 100% !important;
}

/* with generate blocks there's no wide page view, so I tried making my own but I can never get full alignment with the editor and the real rendered page.  -50vw I think is the culprit, but I cant get 100% width to work because it uses a form of viewport.  Whats frustrating is it does render correclty when dev tools is up, but despite my best efforts to have GPT explain to me why, I couldn't wrap my head around it.  It sits idle for now. */
.wide-width,
.force-wide-width,
.force-wide {
  /* this is the method that worked partially but didn't render consistently in the editor unless dev tools was open */
  /* 
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: var(--wp--preset--spacing--30) !important;
  padding-right: var(--wp--preset--spacing--30) !important;
  */

  /* margin-left: calc(var(--wp--style--root--padding-left) * -1) !important; */
  /* margin-right: calc(var(--wp--style--root--padding-right) * -1) !important; */

  /* padding-left: 0 !important; */
  /* padding-right: 0 !important; */

  /* gpt defined the below method as "full-bleed-clean" but it did not work.
  width: 100%;
  max-width: none !important;
  min-width: 100%; /* prevents squishing inside editor wrapper */
  margin-left: 0 !important;
  margin-right: 0 !important;

  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  padding-left: var(--wp--preset--spacing--30);
  padding-right: var(--wp--preset--spacing--30);
}

/* hard override for responsive grid tablet/mobile view wrapping down to single column @ or below 781px (desktop max = 1340) */
@media (max-width: 781px) {
  .grid-flex {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
}

.wp-block-premium-container,
.premium-block-container {
  /*
  background-image: url(http://tranquility.local:8080/wp-content/uploads/2025/07/red-hibiscus-closeup.jpg);
  */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  content: "";
  min-width: 1px;
  min-height: 1px;
}

/* nevermind this was a bug with version after 2.2.9 (2.2.17) */
/*
.premium-container-inner-blocks-wrap {
  min-height: 0;
}
*/

/* =========================================
   4. Tablet breakpoint
   ========================================= */
/*
@media (max-width: 1172px) {
  .wp-site-blocks .is-layout-constrained,
  .editor-styles-wrapper .is-layout-constrained {
    max-width: 1172px;
  }
}
*/

/* =========================================
   4. Tablet breakpoint
   ========================================= */
/*
@media (max-width: 993px) {
  .wp-site-blocks .is-layout-constrained,
  .editor-styles-wrapper .is-layout-constrained {
    max-width: 993px;
  }
}
*/

/* =========================================
   5. Mobile breakpoint
   ========================================= */
/*
@media (max-width: 781px) {
  .wp-site-blocks .is-layout-constrained,
  .editor-styles-wrapper .is-layout-constrained {
    max-width: 781px;
  }
}
*/

.no-dash-line .premium-container-inner-blocks-wrap {
  /*border: 1px dashed #e1e1e1;*/
  border-width: 0;
  border: none;
}