/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

:root {
  --ei-horizontal-content-margin: max(calc((100vw - var(--theme-normal-container-max-width)) / 2), calc((100vw - var(--theme-container-width)) / 2));
}


.ei-horizontal-list {
  display: flex;
  column-gap: 70px;
  row-gap: 20px;
  flex-wrap: wrap;
}

.project-specs-container {
  display: block;
}

.project-specs {
  display: grid;
  grid-template-columns: 40% 60%;
  white-space: nowrap;
}

.project-specs div {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: -1px;
  margin-left: -1px;
  border: 1px solid grey;
  display: flex;
  align-items: center;
}

.project-specs p {
  margin: 0;
}

#footer {
  --theme-list-indent: 1.3vw;
  nav.menu-container ul {
    padding-inline-start: var(--theme-list-indent);
  }
}

/* ******* ******* *******
*   Service Area SINGLE PAGE: .entry-header .page-description
******* ******* ******* */
.single-service-area .entry-header .page-description {
  max-width: 775px;
  margin: 20px auto 10px auto;
}
@media (max-width: 768px) {
  .single-service-area .hero-section[data-type=type-2] header {
    padding-bottom: 0px;
    .page-description {
      background: color-mix(in srgb, var(--theme-palette-color-3) 70%, transparent);
      margin: 20px calc(-1 * var(--ei-horizontal-content-margin));
      margin-bottom: 0px;
      padding: 20px var(--ei-horizontal-content-margin);
    }
  }
}
@media (min-width: 769px) {
  .single-service-area .hero-section[data-type=type-2] {
    --opacity: 60%;
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: color-mix(in srgb, var(--theme-palette-color-3) var(--opacity), transparent);
      clip-path: polygon(
        0 100%,
        -15% 90%,
        50% -100%,
        115% 90%,
        100% 100%,
        100% 0,
        0 0
      );
      z-index: 2;
    }
    &::after {
      content: '';
      position: absolute;
      left: 20%;
      right: 20%;
      top: 20%;
      bottom: 0;
      background: color-mix(in srgb, var(--theme-palette-color-3) var(--opacity), transparent);
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      z-index: 1;
    }
  }
}

.corner-gradient-tricolor {
  background-image: linear-gradient(135deg, #b88f96 7%, #724b51 7%, #724b51 14%, #522124 14%, #522124 21%, transparent 21%, transparent 78%, #522124 78%, #522124 85%, #724b51 85%, #724b51 92%, #b88f96 92%);
}

/* ******* ******* *******
*   FORCE ICONS TO STANDARD SIZE
******* ******* ******* */
[class*="wp-image"] img[width="250"] {
  height: auto;
  width: 75px;
}

/* ******* ******* *******
* LINE ITEMS IN DESCRIPTION DETAIL
******* ******* ******* */
.archive-description-griditem {
  display: grid;
  grid-template-columns: 50px 1fr;
  text-align: initial;
  line-height: 275%;
}

/* ******* ******* *******
*   FLOORPLAN GRID
******* ******* ******* */
.cabin-floorplan-block-grid,
.cabin-floorplan-block-grid .gfield_radio {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 30px;
}
.cabin-floorplan-block-grid legend.gfield_label.gform-field-label {
  display: block;
  margin: 15px auto;
}
.floorplan-result-images {
  display: flex;
}
.floorplan-cabin-result .floorplan-details {
  margin: 30px 15px;
}
.cabin-price {
  font-size: 1.3em;
  font-weight: 600;
  color: var(--theme-palette-color-8);
}

/* ******* ******* *******
*   ALIGN FLOOR PLAN BUTTONS ALONG BOTTOM
******* ******* ******* */
.floorplan-cabin-result {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  background: var(--theme-palette-color-2);
}

/* ******* ******* *******
*   TWEAKS FOR FLOOR PLAN IN GRAVITY FORMS
******* ******* ******* */
.gfield_radio .floorplan-cabin-result {
  background: var(--theme-palette-color-4);
}
.gfield_radio .floorplan-result-images {
  padding: 15px;
}
.cabin-floorplan-block-grid .gfield_radio .gchoice input {
  display: none;
}
.gform_wrapper.gravity-theme
  .cabin-floorplan-block-grid
  .gfield-choice-input
  + label {
  max-width: 100%;
  height: 100%;
}

/* ******* ******* *******
*
******* ******* ******* */
.white-background input,
.white-background input:active {
  background-color: #ffffff !important;
}

.content {
  margin: auto;
  max-width: 1360px;
}

.installers-grid {
  display: grid;
  grid-template-columns: repeat(1, 100%);
  grid-auto-rows: 450px;
}

.installers-grid > div {
  margin: 30px;
  border: 1px solid #cfcfcf;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 30px;
  background-color: #ffffff;
}

.installers-grid > div > * {
  padding-bottom: 5px;
}

div#gform_wrapper_63 {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 75px;
  margin-bottom: 75px;
}

input#gform_submit_button_63 {
  margin: auto;
}

@media only screen and (min-width: 686px) {
  .installers-grid {
    grid-template-columns: repeat(2, 50%);
    grid-auto-rows: 450px;
  }
}

@media only screen and (min-width: 1280px) {
  .installers-grid {
    grid-template-columns: repeat(3, 33%);
    grid-auto-rows: 450px;
  }
}

/* SLOPED RIGHT RED TRIANGLE IN HEADER */
/* [data-device="desktop"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 150px;
  background: linear-gradient(
    to bottom right,
    transparent 0 50%,
    var(--theme-palette-color-6) 50.3% 100%
  );
  z-index: 10;
} */

/* tri-puzzle in header */
[data-device=desktop] [data-column=end] {
  padding-right: 100px;
}
[data-device=desktop] [data-column=end] .ct-widget.widget_block {
  position: absolute;
  top: 0;
  right: -100px;
  .tri-puzzle {
    height: 185px;
    width: 265px;
  }
}

/* Reorder featured hero section to top of page on small screens */
@media (max-width:768px) {
  [data-prefix="plan_single"] #main {
    display: flex;
    flex-direction: column;
    .hero-section {
      order: -1;
    }
  }
}

[data-prefix="plan_single"]
  div.hero-section[data-type="type-2"]
  header.entry-header
  > * {
  max-width: 790px;
  background: color-mix(in srgb, var(--theme-palette-color-3), transparent 10%);
  margin: 0px;
  padding: 20px 50px;
}

.triangular-corner .kt-inside-inner-col {
  background: linear-gradient(
    45deg,
    transparent 0 85%,
    var(--theme-palette-color-3) 85% 88%,
    color-mix(in srgb, var(--theme-palette-color-6), transparent 7%) 88% 90%,
    var(--theme-palette-color-6) 90% 100%
  );
}

.ei-numbered-corners .kt-row-column-wrap {
  counter-reset: section;
}
.ei-numbered-corners .kt-inside-inner-col::after {
  counter-increment: section;
  content:  counter(section);
  color: white;
  position: absolute;
  top: 5px;
  right: 15px;
}

/* TRI-TRIANGLES */
.tri-triangle {
  --size: 90px;
  position: relative;
  width: var(--size);
}
.tri-triangle > div {
  color: var(--theme-palette-color-2);
  text-align: center;
  font-size: 1.6em;
  font-weight: 600;
  position: absolute;
  width: 100%;
  z-index: 2;
}
.tri-triangle .kb-svg-icon-wrap svg {
  width: 1.4em;
  height: 1.4em;
  margin-top: 2px;
}
.tri-triangle > span {
  transform: rotateZ(317deg) rotateX(15deg) rotateY(-15deg);
  position: absolute;
}
.tri-triangle > span:nth-child(1) {
  background: linear-gradient(
    to top right,
    transparent 0%,
    transparent 50%,
    var(--theme-palette-color-7) 50%,
    var(--theme-palette-color-7) 100%
  );
  inset: -10px 30px;
  width: calc(var(--size) - 20px);
  height: calc(var(--size) - 20px);
}
.tri-triangle > span:nth-child(2) {
  background: linear-gradient(
    to top right,
    transparent 0%,
    transparent 50%,
    var(--theme-palette-color-6) 50%,
    var(--theme-palette-color-6) 100%
  );
  inset: -10px -25px;
  width: var(--size);
  height: var(--size);
}
.tri-triangle > span:nth-child(3) {
  background: linear-gradient(
    to top right,
    transparent 0%,
    transparent 50%,
    var(--theme-palette-color-3) 50%,
    var(--theme-palette-color-3) 100%
  );
  inset: 0;
  width: var(--size);
  height: var(--size);
}

.corner-tri-triangle .tri-triangle {
  transform: scale(4);
  filter: brightness(1.2);
  margin-right: 75px;
}
@media (max-width: 768px) {
  .corner-tri-triangle .tri-triangle {
    transform: scale(2);
    translate: 60px 40px;
  }
}

/* tri-puzzle */
.tri-puzzle {
  position: relative;
  width: 250px;
  aspect-ratio: 2;
  filter: brightness(1.3);
  span {
    position: absolute;
    height: 100%;
    width: 100%;
  }
}
.tri-puzzle span:nth-child(1) {
  --bg-color: var(--theme-palette-color-6);
    background-image: linear-gradient(0, var(--bg-color), var(--bg-color));
    --size: 80%;
    --midpoint: calc(var(--size) / 2);
    clip-path: polygon(
      var(--midpoint) calc(100% - var(--size)), /* tip */
      var(--size) 100%, /* right base point */
      0% 100% /* left base point */
    );
}
.tri-puzzle span:nth-child(2) {
  --bg-color: var(--theme-palette-color-3);
    background-image: linear-gradient(0, var(--bg-color), var(--bg-color));
    --size: 65%;
    --midpoint: calc(var(--size) / 2);
    --left-offset: calc(100% - var(--size));
    clip-path: polygon(
      calc(var(--left-offset) + var(--midpoint)) calc(100% - var(--size)), /* tip */
      calc(var(--left-offset) + var(--size)) 100%, /* right base point */
      var(--left-offset) 100% /* left base point */
    );
}
.tri-puzzle span:nth-child(3) {
  --bg-color: var(--theme-palette-color-7);
    background-image: linear-gradient(0, var(--bg-color), var(--bg-color));
    --size: 45%;
    --midpoint: calc(var(--size) / 2);
    --left-offset: calc(80% - var(--size));
    clip-path: polygon(
      var(--left-offset) 0%, /* left base point */
      calc(var(--left-offset) + var(--midpoint)) var(--size), /* tip */
      calc(var(--left-offset) + var(--size)) 0% /* right base point */
    );
}


/* Tracking Line */
@supports (anchor-name: --link-start) {
  @media (min-width: 768px) {
    .link-line--start {
      anchor-name: --link-start;
    }
    .link-line--target {
      anchor-name: --link-end;
    }
    .link-line--start::after, .link-line--start::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: -1;
      border: 0px solid var(--theme-palette-color-6);
      margin: -1px;
    }
  
    .link-line--start.top-left::before {
      border-width: 2px;
      border-right: 0;
      border-bottom: 0;
      border-top-left-radius: 20px;
      left: anchor(--link-start center);
      right: calc(anchor(--link-end center) + 200px);
      inset-block-end: calc(anchor(--link-start start) - 75px);
    }
    .link-line--start.top-right::before {
      border-width: 2px;
      border-left: 0;
      border-bottom: 0;
      border-radius: 0px 20px 0px 0px;
      right: anchor(--link-start center);
      left: anchor(--link-end center);
      inset-block-end: calc(anchor(--link-start start) - 75px);
    }
    .link-line--start.bottom-left::after {
      border-width: 2px;
      border-right: 0;
      border-top: 0;
      border-bottom-left-radius: 20px;
      left: anchor(--link-start center);
      right: calc(anchor(--link-end center) + 200px);
      inset-block-start: calc(anchor(--link-start start) + 75px);
    }
    .link-line--start.bottom-right::after {
      border-width: 2px;
      border-left: 0;
      border-top: 0;
      border-radius: 0px 0px 20px 0px;
      top: calc(anchor(--link-start center) + 50px);
      right: anchor(--link-start center);
      left: anchor(--link-end center);
      min-width: 125px;
    }
    /* this is so the vertical line on the bottom-right doesn't run into the text if this is the start */
    .link-line--start.top-right.bottom-right::after {
      inset-block-start: calc(anchor(--link-start start) + 75px);
    }
    
  }
}

/* https://www.zookcabins.com/planning/park-model */
@media (min-width: 768px) {
  .ei-traceline .kt-row-column-wrap {
    position: relative;
    --line-radius: 20px;
    --border-style: 2px solid var(--theme-palette-color-6);
    --line-from-bottom: 5vw;
  }
  .ei-traceline--left .tri-triangle {
    margin-left: 40px;
  }
  .ei-traceline--right .tri-triangle {
    margin-right: 55px;
  }
  .ei-traceline.ei-traceline--left .kt-row-column-wrap::after {
    content: '';
    position: absolute;
    left: 90px;
    right: 0;
    top: 0;
    bottom: var(--line-from-bottom);
    border-left: var(--border-style);
    border-bottom: var(--border-style);
    border-bottom-left-radius: var(--line-radius);
  }
  .ei-traceline.ei-traceline--right .kt-row-column-wrap::after {
    content: '';
    position: absolute;
    right: 100px;
    left: 0;
    top: 0;
    bottom: var(--line-from-bottom);
    border-right: var(--border-style);
    border-bottom: var(--border-style);
    border-bottom-right-radius: var(--line-radius);
  }
  .ei-traceline.ei-traceline--clip-top .kt-row-column-wrap::after {
    top: 80px;
  }
}

/* TABLES */
.wp-block-table.is-style-regular :is(th, td):first-child {
  text-align: left;
  padding-left: 30px;
}
.wp-block-table.is-style-regular th {
  color: var(--theme-palette-color-2);
  background: var(--theme-palette-color-6);
}
.wp-block-table.is-style-regular :is(thead, tfoot) td {
  font-weight: 600;
}
.wp-block-table.is-style-regular tfoot tr:first-child td {
  border-top: 2px solid !important;
}

/* FIRST COLUMN 33% */
.first-column-33.wp-block-table table {
  display: block;
  width: 100%;
  border-collapse: collapse;
}
.first-column-33.wp-block-table :is(thead, tbody, tfoot) {
  display: contents;
}
.first-column-33.wp-block-table tr {
  display: grid;
  grid-template-columns: 33% repeat(auto-fit, minmax(0, 1fr));
}
.first-column-33.wp-block-table tr :is(th, td):not(:first-child) {
  text-align: center;
}
/* simulate border-collapse */
.first-column-33.wp-block-table :is(thead, tbody, tfoot, tr) {
  border-width: 0px !important;
}
.first-column-33.wp-block-table table {
  border-width: 0px 0px 1px 1px !important;
}
.first-column-33.wp-block-table :is(td, th) {
  border-width: 1px 1px 0px 0px !important;
}

[class*="minimum-width"] {
  max-width: 100vw;
  overflow-x: auto;
  padding-bottom: 10px;
}
.minimum-width-768 > div {
  min-width: 768px !important;
  font-size: clamp(12px, 1.5vw, var(--theme-font-size));
}
.minimum-width-500 > div {
  min-width: 500px !important;
}

/* PRODUCT DETAILS GRID */
.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48.4%, 1fr));
  gap: 20px;
}
.details-grid-cell {
  position: relative;
  overflow: hidden;
  padding: 20px;
  background-color: var(--theme-palette-color-2);
  color: var(--theme-palette-color-1);
  padding-left: 75px;
  font-size: 1.2em;
  > h4 {
    color: var(--theme-palette-color-1)!important;
    margin: 0px;
  }
  > span {
    position: absolute;
    background-size: 80px;
    background-repeat: no-repeat;
    background-position: bottom;
    bottom: -20px;
    left: -10px;
    width: 80px;
    top: 0;
    opacity: 0.4;
  }
}


/* Gallery settings */
.ei-swiper-parent {
  --slide-padding: 10px;
  --swiper-pagination-bottom: -55px;
  --swiper-theme-color: var(--theme-palette-color-1);
}
.ei-swiper-slide {
  height: auto;
}
.ei-gallery-slide-content {
  display: contents;
  article {
    height: 100%;
  }
  .post-gallery-slide-title {
    font-size: clamp(18px, 1.5vw, 22px);
  }
}
[data-prefix=portfolio_archive] {
  article {
    max-width: 450px;
    margin: auto;
  }
  a.entry-button {
    text-transform: uppercase;
    text-decoration: underline;
    font-weight: 600;
    font-size: 1.1em;
  }
}

.icon-wrapper {
  display: flex;
  justify-content: center;
  gap: 10px;
}

[data-sf-form-id="63456"] ul {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: center;
  align-items: flex-end;  
}

.testimonial-info {
  font-weight: 600;
}

/* unpoly popup on strong testimonials */
up-cover-viewport, up-drawer-viewport, up-modal-viewport {
  align-items: center!important;
}

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