/* Fonts  */
@import url('https://fonts.googleapis.com/css2?family=Sansation:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

/* Variables  */
:root {
    --foreground-color: #333;
    --background-color: #FFF;
    --primary-color: rgb(243, 50, 6);
    --link-color: rgb(19, 120, 243);
    --font-stack: "Sansation", sans-serif;
    --grey60: #333;
    --grey50: #666;
    --grey40: #999999;
    --grey30: #CCC;
    --grey20: #DDD;
    --grey10: #f4f4f4;
}


/* Typefaces  */
.sansation-light {
  font-family: "Sansation", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.sansation-regular {
  font-family: "Sansation", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.sansation-bold {
  font-family: "Sansation", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.sansation-light-italic {
  font-family: "Sansation", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.sansation-regular-italic {
  font-family: "Sansation", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.sansation-bold-italic {
  font-family: "Sansation", sans-serif;
  font-weight: 700;
  font-style: italic;
}

/* Base Styles  */
html {
    padding: 2rem;
}
body {
    font-family: var(--font-stack);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    color: var(--foreground-color);
}
h1, h2, h3, h4, h5, h6 {
    color: var(--foreground-color);
}
.col-container {
    container-type: inline-size;
    column-width: 18rem;
    column-gap: 2rem;
    column-rule: 1px solid var(--grey30);
}
article {
    margin-top: 3rem;
}
article > h2 {
    text-align: center;
    /* border-bottom: 1px solid black; */
    text-transform: uppercase;
    position: relative;
    margin-bottom: 2rem;
    background: var(--grey40);
    color: var(--background-color);
    border-radius: .125rem;
}
article > h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px; /* overlaps border */
    transform: translateX(-50%);
    
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid var(--grey40);
}
article > header {
    text-align: center;
}

article > header > h2 {
    font-size: 1.5rem;
    color: var(--grey50);
}

h1.graphic.hsbc{
    height: 60px;
    width: 221px;
    background-image: url("img/hsbc-logo.svg");
}
h1.graphic.fedex{
    height: 60px;
    width: 196px;
    background-image: url("img/fedex-logo.svg");
}
h1.graphic.bosch{
    height: 60px;
    width: 269px;
    background-image: url("img/bosch-logo.svg");
}
h1.graphic {
    display: inline-block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(0.75);
    transform-origin: center;
    margin-bottom: 0;
}


section {
    margin-bottom: 2rem;
}

section aside {
    margin-bottom: 2rem;
}
section aside h6 {
    font-variant: small-caps;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--primary-color);
    margin-top: 1rem;
}


/* Pad a top-margin on certain leading content in the right column when stacked */
@media (max-width: 768px) {
    .leading-text {
        margin-top: 2rem;
    }
}



.accented {
    color: var(--primary-color);
}
.callout {
    display: block;
    padding: 2rem;
    border-radius: .25rem;
    border: 1px solid var(--grey20);
    background-color: var(--grey10);
    background: linear-gradient(180deg,rgba(153, 153, 153, 0.0) 0%, rgba(153, 153, 153, 0.10) 100%);
    color:var(--foreground-color);
}

/* Text Links with Images and Captions  */
a.text,
a.text:active,
a.text:visited {
    text-decoration: none;
    color: var(--link-color);
    font-size: .825rem;
    margin-right: .25rem;
    white-space: nowrap;
    word-break: keep-all;
    overflow-wrap: normal;
    position: relative;
    display: inline-block;
}
a.text:hover {
    text-decoration: underline;
}

.text::after {
  content: attr(data-caption);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);

  background: #222;
  color: #fff;
  padding: 0.5rem 0.65rem;
  font-size: 0.75rem;
  line-height: 1.4;

  inline-size: max-content;
  max-inline-size: 220px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;

  text-align: center;
  border-radius: 4px;

  opacity: 0;
  pointer-events: none;
  z-index: 1000;
}

/* show on hover / focus */
.text:hover::after,
.text:focus-visible::after {
  opacity: 1;
}


/* ----------------------------------------------------------------------------------------- Lists  */
/* Panel List  */
.panel-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}
.list-panel {
    padding: 1rem;
    background: var(--grey10);
    background: linear-gradient(180deg,rgba(153, 153, 153, 0.0) 0%, rgba(153, 153, 153, 0.10) 100%);
    border: 1px solid var(--grey20);
    font-size: .875rem;
}
.list-panel i {
    display: block;
    text-align: center;
}
.list-panel i span {
    font-size: 2rem;
}
.list-panel hr {
    margin: .5rem 1rem;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.4);
}
/* Stack vertically at 768px and below */
@media (max-width: 768px) {
    .panel-list {
        grid-template-columns: 1fr;
    }
}

/* Title list  */
ul.title-level {
    list-style-type: square;
    margin-bottom: 0;
    color: var(--grey40);
}
ul.title-level li::marker {
    color: var(--primary-color);
}
ul.title-level li {
    line-height: 1.75ch;
}
ul.title-level li:not(nth-last-of-type) {
    margin-bottom: .75rem;
}

/* Regular List  */
ul.regular-list {
    list-style-type: circle;
}
ul.regular-list li {
    margin-top: 1.125rem;
    line-height: 1.75ch;
}
ul.regular-list li::marker {
    color: var(--primary-color);
}

/* Acccented Numbered List  */
ol.accent-num-list {
   padding-left: 1rem;
   margin-bottom: 0;
}
ol.accent-num-list li {
    margin-top: 1.125rem;
    line-height: 1.75ch;
}
ol.accent-num-list li::marker {
    color: var(--primary-color);
    font-size: 125%;
}

/* Feature Boxes  */
 ul.feature-boxes {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
ul.feature-boxes > li {
    width: 100%;
    padding: 2rem;
    margin: 1rem 0 0 0;
    border-radius: .25rem;
    background: var(--grey10);
    background: linear-gradient(180deg,rgba(153, 153, 153, 0.0) 0%, rgba(153, 153, 153, 0.10) 100%);
    border: 1px solid var(--grey20);
    @media (min-width: 768px) {
    /* styles for medium screens and up */
        width: calc(50% - 1rem);
        margin-right: 1rem;
    }
}
 ul.feature-boxes h6 {
    margin-top: 0;
}


header.page-header h4,
header.page-header + h4,
article section aside h3 {
    color: var(--primary-color);
    text-transform: uppercase;
}

article section aside h3 {
    border-bottom: 1px solid lightgray;
    margin-bottom: 1.25rem;
}

/* Page Header  */
header.page-header {
    position: relative;
    padding-right: 17rem;
}
header.page-header img {
    position: absolute;
    top: 0;
    right: 0;
    width: 15rem;
    height: auto;
    margin-bottom: 2rem;
    border-radius: 8rem;
}
@media (max-width: 600px) {
    header.page-header {
        padding-right: 0;
    }
    header.page-header img {
        display: none;
    }
}


/* Screenshot Thumnail Link  */
.thumb {
  display: inline-block;
  width: 160px;
  height: 100px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 6px;
  cursor: pointer;
}

/* Image Callout Modal  */
#img-callout .modal-header {
    border-bottom: none;
}
#img-callout .modal-body img {
    height: 80vh;
  object-fit: contain;
}
#img-callout .modal-body p {
    margin-bottom: 0;
}

/* Layouts  */
ul.skill-tag-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
ul.skill-tag-list > li {
    list-style-type: none;
    padding: .125rem .5rem;
    color: var(--grey50);
    font-size: .75rem;
    margin: 0 .5rem .5rem 0;
    display: inline-block ;
    background-color: #e7f1ff;
    color: #2f6fd6;
    border-radius: 999px;
    border: 1px solid #d6e4ff;
}

/* Outcome Thumbnail List  */
ul.thumbnails {
    list-style-type: none;
    margin: 1rem 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

ul.thumbnails li {
    border: 1px solid var(--grey30);
    background: transparent;
    border-radius: .25rem;
    padding: .5rem;
    margin: 0 1rem 1rem 0;
    transition: all 0.3s ease;
    filter: blur(1px);
    /* filter: grayscale(70%); */
}
ul.thumbnails li:hover {
    border: 1px solid var(--grey50);
    background: var(--grey10);
    border-radius: .75rem;
    box-shadow: 0px 2px 2px 2px rgba(0,0,0,0.1);
    filter: none;

}
ul.thumbnails li:last-of-type {
    margin-right: 0;
}

ul.thumbnails li a.thumb {
  display: inline-block;
  width: 160px;
  height: 100px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: .325rem;
  cursor: pointer;
}