:root {
  --main-font: "Inter", sans-serif;
  --main-text-color: #0e0e0e;
  --brand-primary: #1e90ff;
  --brand-primary-dark: #1674d9;
  --brand-accent: #ffe566;
  --brand-surface: #f0efea;
  --brand-muted: #5c5c5c;
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 30, 144, 255;
  --bs-body-font-family: var(--main-font);
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --type-title: clamp(1.5rem, 2vw, 2rem);
  --type-lead: clamp(1.125rem, 1.5vw, 1.5rem);
  --type-meta: 0.875rem;
  --shadow-screenshot: 0 8px 24px rgba(0, 0, 0, 0.12);
}
/* media queries for printing */
@media print {
  :root {
    --bs-body-font-size: 12px;
  }
  .print-show {
    display: block !important;
    color: black !important;
  }

  .print-hide, #navbarNav.print-hide {
    display: none !important;
  }
  .img-fluid{
    max-width: 100% !important;
    height: auto !important;
  }
  body{
    padding-top: 0 !important; /* Adjust this value as needed for printing */
  }
  div.row, div.row div:first-child{
    --webkit-page-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  h1, h2, h3, h4{
    --webkit-page-break-after: avoid;
    page-break-after: avoid;
    break-after: avoid;
  }
  /* no borders if printing */
  div.col-auto:not(.collapsed){
    border: none !important;
    background-color: transparent !important;
  }
}
/* END media queries */
body {
  font-family: var(--main-font);
  font-weight: 400;
  letter-spacing: -0.2px;
  color: var(--main-text-color);
}
h1, h2, h3, h4, h5 {
  font-family: var(--main-font);
  font-weight: 600;
}

/* Add 2rem top margin to any .row whose first column starts with h2 */
.row:has(> [class*="col-"]:first-child > h2:first-child),
.row:has(> [class*="col-"]:first-child > h3:first-child) {
  margin-top: 3rem;
}

/* special card border radius override */
.card{
  border-radius: 0;
}

/* Buttons: restore corner radius (global --bs-border-radius stays 0 for layout) */
.btn,
a.btn,
button.btn {
  --bs-btn-border-radius: 0.375rem;
  border-radius: 0.375rem;
}
.btn-sm,
a.btn-sm,
button.btn-sm {
  --bs-btn-border-radius: 0.25rem;
  border-radius: 0.25rem;
}
.btn-lg,
a.btn-lg,
button.btn-lg {
  --bs-btn-border-radius: 0.5rem;
  border-radius: 0.5rem;
}
/* Change navbar background color */
.navbar {
  background-color: transparent
}

/* Change navbar text color */
.navbar .navbar-nav .nav-link {
  color: white;
}

/* Change navbar active link color */
.navbar .navbar-nav .nav-item.active .nav-link {
  color: var(--brand-accent);
}

/* Change navbar hover link color */
.navbar .navbar-nav .nav-link:hover {
  color: var(--brand-accent);
}

/* Change navbar brand color */
.navbar .navbar-brand {
  font-size: 1.5em;
  line-height: 1.5em;
  color: var(--brand-accent);
}

.hero-accent {
  color: var(--brand-accent);
}

#defaultContent {
  display: none;
}

.header {
  background-image: url('images/k1go_sketch2blue.png');
  /* background image fills width */
  background-size: cover;
  color: white;
  text-align: left;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: var(--brand-primary);
  background-blend-mode: multiply;
  transition: transform 0.3s ease-in-out;
}
.hide-header {
  transform: translateY(-100%);
}
.footer {
  transition: transform 0.3s ease-in-out;
}
.hide-footer {
  transform: translateY(100%);
}

.brand-color {
  color: var(--brand-primary);
}

.site-footer {
  background-color: var(--brand-primary-dark);
}

/* content section 1 */
.color-box-1 {
  background-color: var(--brand-primary);
  text-align: left;
  color: white;
}

/* below fixes header */
#work::before {
  content: "";
  display: block;
  height: 270px;
  /* Replace with the height of your header */
  margin-top: -270px;
  /* Negative value of your header's height */
  visibility: hidden;
  pointer-events: none;
}

body {
  padding-top: 270px;
}

html.is-page-view #hero {
  display: none;
}

html.is-page-view body {
  padding-top: 62px;
}

/* initially, may be changed by javascript */

#logos .img-fluid {
  filter: grayscale(100%) brightness(180%);
  max-height: 40px;
  width: auto;
  object-fit: contain
}

.img-fluid.border {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}

#hero {
  transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out;
  max-height: 1000px;
  /* adjust this to the maximum possible height of your #hero div */
  opacity: 1;
  overflow: hidden;
}

.navbar-toggler.collapsed .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E");
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-x-lg' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3E%3C/svg%3E");
}
.img-ratio {
  /* div wrap an image you want to crop */
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* default for 4:3 aspect ratio */
  overflow: hidden;
}
.img-ratio img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.r4to3 {
  padding-bottom: 75%; /* combine with .img-ratio for 4:3 aspect ratio */
}
.r1to1 {
  padding-bottom: 100%; /* combine with .img-ratio for 1:1 aspect ratio */
}
.r5to3 {
  padding-bottom: 60%; /* combine with .img-ratio for 5:3 aspect ratio */
}

.pos-left {
  object-position: 0 center;
}
.pos-right {
  object-position: 100% center;
}
.nav-link.active {
  color: var(--brand-accent);
  border-bottom: 3px solid var(--brand-accent);
}

/* ----- Phase 6: project grid (replaces Bootstrap card recipe) ----- */
.project-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  padding: 1.5rem 0;
}

@media (min-width: 768px) {
  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .project-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.project-tile {
  display: flex;
  flex-direction: column;
  background: var(--brand-surface);
  border: 1px solid #e4e2db;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-screenshot);
  color: inherit;
}

.project-tile__media {
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.project-tile__body {
  padding: 1rem 1.1rem 1.25rem;
}

.project-tile__name {
  margin: 0 0 0.35rem;
  font-size: var(--type-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand-muted);
}

.project-tile__desc {
  margin: 0;
  font-size: var(--type-lead);
  font-weight: 600;
  line-height: 1.25;
}

/* Offcanvas menu tiles — dark cards on dark panel (matches published site) */
#mywork .workmenu-tile {
  display: block;
  background-color: var(--bs-light-bg-subtle);
  border: 1px solid var(--bs-border-color);
  margin-bottom: 0.75rem;
  text-decoration: none;
  color: var(--bs-body-color);
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.15);
}

#mywork .workmenu-tile:hover {
  border-color: var(--brand-accent);
  color: var(--bs-body-color);
}

#mywork .workmenu-tile__img {
  width: 100%;
  display: block;
}

#mywork .workmenu-tile__body {
  padding: 0.85rem 1rem 1rem;
}

#mywork .workmenu-tile__name {
  margin: 0 0 0.25rem;
  font-size: var(--type-meta);
  font-weight: 600;
  color: var(--bs-body-color);
}

#mywork .workmenu-tile__desc {
  margin: 0 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--bs-secondary-color);
}

#mywork .workmenu-tile__link {
  display: inline-block;
  font-size: var(--type-meta);
  font-weight: 400;
  color: var(--bs-primary);
  border: 1px solid var(--bs-primary);
  padding: 0.25rem 0.5rem;
  text-decoration: none;
}

/* ----- Recommendations page portraits ----- */
#recco img {
  max-width: 100px;
  height: auto;
}

/* ----- Case study layout ----- */
.case-study {
  padding-top: 2rem;
  padding-bottom: 3rem;
}

.case-study__intro {
  margin-bottom: 2.5rem;
}

.case-study__intro h1 {
  font-size: var(--type-title);
  margin-bottom: 0.5rem;
}

.case-study__meta {
  font-size: var(--type-meta);
  color: var(--brand-muted);
  margin-bottom: 1rem;
}

.case-study__section {
  margin-top: 3rem;
}

.case-study__section h2 {
  margin-bottom: 1rem;
}

.case-study__split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1rem;
}

@media (min-width: 992px) {
  .case-study__split {
    grid-template-columns: 2fr 1fr;
  }

  .case-study__split--equal {
    grid-template-columns: 1fr 1fr;
  }
}

.screenshot-frame {
  display: block;
  width: 100%;
  box-shadow: var(--shadow-screenshot);
  border: 1px solid #e0e0e0;
}

.case-study__devices {
  display: grid;
  grid-template-columns: 6fr 4fr 2fr;
  gap: 0.75rem;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .case-study__devices {
    grid-template-columns: 1fr;
  }
}

/* ************for carousel sizing */
#testimonials .carousel-item {
  height: 400px; /* Adjust this value according to your needs */
  overflow: hidden;
}
.img-container {
  width: 100px; /* adjust as needed */
  height: 100px; /* adjust as needed */
  background-size: cover;
  background-position: center;
  border:1px solid #ccc;
  border-radius: 5px;
}
/* ************* extra styles for text on hover */
.image-container {
  position: relative;
}

.image-container img {
  width: 100%;
  vertical-align: middle
}

.image-container .image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: .5s ease;
  background-color: transparent;
}
/*
.image-container:hover .image-overlay {
  opacity: 1;
}
*/
.image-container .overlay-content {
  color: white;
  font-size: 20px;
  text-align: center;
  padding: 10px;
  background-color: rgba(9, 73, 167, 0.8);
  width: 100%;
  position: absolute;
  bottom: 0%;
}
.overlay-content p{
  margin-bottom: 0;
}
/* ***** and the overlay on mobile-touch */
@media (hover: none) {
  .image-container .image-overlay {
    opacity: 1;
    top: auto;
    bottom: 0;
    height: 2em;
  }
  
  .image-overlay.rounded {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    max-width: 50%;
    max-height: 50%;
  }


  .image-container .overlay-content h2 {
    margin: 0;
    font-size: small;
  }

}
/* ********* new styles for image overlay caousel */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 14, 32, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

#overlay img {
  max-width: 100%;
  max-height: 100%;
}

#prev, #next, #close {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  border: none;
  padding: 0.3em;
  cursor: pointer;
  color:#fff;
  font-size: xx-large;
}

#prev {
  left: 10px;
}
#close {
  right: 10px;
  top: 50px;
  padding-top: 0;
  padding-bottom: 0;
}

#next {
  right: 10px;
}


/* Override or reset styles for img if div.col-auto has .collapsed */
div.col-auto:hover img{
  filter: none !important;
}
/* Style for img inside div.col-auto that is not explicitly .collapsed */
div.col-auto:not(.collapsed) img{
  filter: none !important;
}
div.col-auto:not(.collapsed){
  background-color: rgb(248, 249, 250)!important;
  border: 1px solid #ccc; 
  border-bottom: none; 
  position: relative; bottom: -1px;
}
.collapsing {transition:none;}
div#details>div{border: 1px solid #ccc;}