/** 
  All css declarations in this file are specific
  to `plain-design`; and they follow the same
  methodology of `cube.fyi`.

  Any reusable `cube` artefacts can be found under
  `cube` folder following the same naming conventions.
*/

/** import reusable `cube` artefacts */
@import url('./cube.css');

/* fox to offset horizontal scroll caused by full-bleed */
body {
  overflow-x: hidden;
}

/** global enhancements on top of kis.css */
footer {
  font-size: var(--size-xs);
  color: var(--brand-text);
  background-color: var(--brand-background);
  /* pull up because of .scroll-top being positioned out of the viewport */
  margin-bottom: -8rem;
}

footer::before, footer::after {
  content: ' ';
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  background-repeat: no-repeat;
  background-size: contain;
}

footer::before {
  background-image: url(/assets/images/footer-shape-left.png);
  background-position: bottom left;
}

footer::after {
  background-image: url(/assets/images/footer-shape-right.png);
  background-position: top right;
}

/** plain-design specific compositions, if any */

/** plain-design specific utilities, if any */

/** plain-design specific blocks, if any */
:is(#why.hero, #contact.hero) > :first-child {
  order: 2;
}

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

.price-details > * {
  padding: var(--space-xs-s);
  line-height: 2;
}

.price-details > span {
  font-size: var(--size-l);
  color: var(--neutral-text-medium);
}

.brand-button {
  border-radius: 6px;
  padding-block: var(--space-3xs-2xs);
  padding-inline: var(--space-s-m);
  width: max-content;
  background-color: var(--brand-background-weak);
}

.service-icon {
  width: 6rem;
  height: 6rem;
  background-image: url(/assets/images/polygon.svg);
  background-repeat: no-repeat;
  background-position: center;
  color: var(--brand-icon);

  font-size: var(--size-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.service-icon.lni {
  font-size: var(--size-xl);
}

.blog figcaption {
  display: flex;
  justify-content: space-between;
  font-size: var(--size-xs);
  padding-block: var(--space-3xs-2xs);
  margin-inline: var(--space-xs-s);
}

:is(.work, .blog, .service) > header {
  margin-inline: var(--space-xs-s);
  padding-block-end: var(--space-xs-s);
}

:is(.work, .blog, .service) > header h3 {
  color: var(--neutral-text-medium);
  font-size: var(--size-s);
  padding-block-end: var(--space-2xs-xs);
  max-width: 36ch;
}

.blog :is(figcaption, header) :where(h3, a):hover {
  color: var(--brand-text-strong);
}

:is(.price):hover .brand-button, .brand-button.strong {
  background-color: var(--brand-background-strong);
  color: white;
}

:is(.work, .service, .price):hover .service-icon {
  color: var(--brand-text);
  background-image: url(/assets/images/polygon.svg#brand-background-strong);
}


.newsletter :is(input, button) {
  padding: .75em;
  border-radius: 32px;
}

.newsletter button {
  background-color: var(--brand-background-strong);
  color: var(--brand-text);
}

.scroll-top {
  position: sticky;
  margin-block-start: calc(100vh + 8rem);
  margin-block-end: 0;
  bottom: 1rem;
  left: calc(100vw - 5rem);

  padding: 1rem;
  background-color: var(--brand-background-strong);
  border-radius: 20%;
  color: white;
  border: none;
}

.scroll-top > .lni {
  margin-block: auto auto;
  line-height: 0;
}

#pricing .tabs {
  --tab-display-as: grid;
  --pill-radius: 32px;
}

#pricing .tabs label {
  border-style: solid;
  border-width: 2px;
  border-color: var(--neutral-border);
  padding-inline: 1.5rem;
  padding-block: .75rem;
  font-size: var(--size-xs);
  background-color: var(--neutral-background-weak);
  justify-content: center;
}

#pricing .tabs > input:checked + label {
  color: var(--brand-text);
  background-color: var(--brand-background-strong);
}

#pricing .tabs label:nth-of-type(odd) {
  margin-left: auto;
  border-bottom-left-radius: var(--pill-radius);
  border-top-left-radius: var(--pill-radius);
  border-right: 0;
}

#pricing .tabs label:nth-of-type(even) {
  margin-right: auto;
  border-left: 0;
  border-bottom-right-radius: var(--pill-radius);
  border-top-right-radius: var(--pill-radius);
}

/* todo: general input/textarea styling, take to kis? */
#contact-form :is(input, textarea) {
  border: 1px solid var(--neutral-border-weak);
  border-radius: 6px;
  padding-inline: .50em;
  padding-block: .50em;
}


.work-item.card header > a {
  position: absolute;
  right: 2rem;
  top: -1.5rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;

  border-style: solid;
  border-width: 2px;
  border-radius: 50%;
  border-color: var(--neutral-border); 
  color: var(--neutral-text-medium);
  background: var(--neutral-background);

  box-shadow: var(--generic-shadow);
}

@media (hover: hover) {
  .work-item.card header > a:hover {
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-property: color, border, background-color;

    color: var(--brand-text);
    background-color: var(--brand-background-strong);
    border-color: var(--brand-border-hover);
  }
}

@media (hover: hover) {
  .team-member.card {
    transition-duration: 800ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-property: background-color;
  }

  .team-member.card:hover {
    background-color: var(--brand-background-strong);
  }
  
  .team-member.card:hover header * {
    color: var(--brand-text);
  }

  .team-member:hover .social-share-list li {
    visibility: visible;
    transform: translateX(0px);
  }
}

.brand-text {
  color: var(--brand-text-strong);
}

.main-cta {
  border-radius: 32px;
  border-top-right-radius: 0px;
  
  cursor: pointer;
  display: inline-block;
  margin-block-start: 3rem;

  font-weight: 500;
  overflow: hidden;
  padding-block: 16px;
  padding-inline: 40px;
  color: var(--brand-text);
  background-color:var(--brand-background);
}

.main-cta:hover {
  background-color: var(--brand-background-hover);
}

/*** end blocks ***/

/** plain-design specific exceptions, if any */
form.grid[data-layout="2x2"] textarea  {
  grid-column: 1 / -1;
}

#home, #work {
  background-color: var(--neutral-background-weak);
}

/** 
 the min-width is a function of `--grid-min-item-size` in
 `.hero.grid[data-layout="2x2"]` taking into account padding
 and margins of the .hero... what this means is if you change
 `--grid-min-item-size` then you will have to come back to
 tweak the min-width here; default hero.grid min-item size
 is at 30rem.
*/
@media (min-width: 52.875rem) {
  #home::before {
    content: "";
    background-color: var(--neutral-background-medium);

    height: 100%;
    width: 55vw;
    margin-inline: auto;
    position: absolute;
    top: 0px;
    right: 0px;
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
    overflow-x: hidden;
  }
}