/* ============================================
   CSS VARIABLES
   ============================================ */

:root {
  /* Color Palette */
  --color-1: oklch(0.229 0.005 248.0);
  --color-2: oklch(0.4661 0.003 60.35);
  --color-3: #9b999947;
  --color-4: #ffffff;

  --accent-color: #E84B26;
  --accent2-color: #ff552f9b;
  --accent3-color: #fbe9e8;
  --accent4-color: #fefbfb;

  /* Font Family */
  --font-family: "IBM Plex Sans", sans-serif;

  /* Type Scale - Display Large */
  --display-lg-size: clamp(1.959rem, calc(1.577rem + 1.909vw), 3.008rem);
  --display-lg-weight: 800;
  --display-lg-line-height: 1.55;
  --display-lg-letter-spacing: 0.015em;

  /* Type Scale - Display Medium */
  --display-md-size: clamp(1.801rem, calc(1.502rem + 1.492vw), 2.622rem);
  --display-md-weight: 800;
  --display-md-line-height: 1.55;
  --display-md-letter-spacing: 0.015em;

  /* Type Scale - Heading 1 */
  --h1-size: clamp(1.656rem, calc(1.427rem + 1.143vw), 2.284rem);
  --h1-weight: 500;
  --h1-line-height: 1.55;
  --h1-letter-spacing: 0.005em;

  /* Type Scale - Heading 2 */
  --h2-size: clamp(1.399rem, calc(1.278rem + 0.609vw), 1.734rem);
  --h2-weight: 600;
  --h2-line-height: 1.55;
  --h2-letter-spacing: 0.005em;

  /* Type Scale - Heading 3 */
  --h3-size: clamp(1.287rem, calc(1.205rem + 0.409vw), 1.511rem);
  --h3-weight: 500;
  --h3-line-height: 1.6;
  --h3-letter-spacing: 0.025em;

  /* Type Scale - Heading 4 */
  --h4-size: clamp(1.183rem, calc(1.134rem + 0.244vw), 1.317rem);
  --h4-weight: 500;
  --h4-line-height: 1.6;
  --h4-letter-spacing: 0.025em;

  /* Type Scale - Heading 5 */
  --h5-size: clamp(1.134rem, calc(1.100rem + 0.173vw), 1.229rem);
  --h5-weight: 500;
  --h5-line-height: 1.6;
  --h5-letter-spacing: 0.03em;

  /* Type Scale - Heading 6 */
  --h6-size: clamp(1.088rem, calc(1.066rem + 0.109vw), 1.148rem);
  --h6-weight: 500;
  --h6-line-height: 1.6;
  --h6-letter-spacing: 0.03em;

  /* Type Scale - Body XL */
  --body-xl-size: clamp(1.043rem, calc(1.033rem + 0.052vw), 1.071rem);
  --body-xl-weight: 400;
  --body-xl-line-height: 1.6;
  --body-xl-letter-spacing: 0.03em;

  /* Type Scale - Body */
  --body-size: clamp(1.000rem, calc(1.000rem + 0.000vw), 1.000rem);
  --body-weight: 400;
  --body-line-height: 1.6;
  --body-letter-spacing: 0.03em;

  /* Type Scale - Body Small */
  --body-sm-size: clamp(0.959rem, calc(0.968rem + -0.046vw), 0.933rem);
  --body-sm-weight: 400;
  --body-sm-line-height: 1.65;
  --body-sm-letter-spacing: 0.03em;

  /* Type Scale - Caption Large */
  --caption-lg-size: clamp(0.919rem, calc(0.937rem + -0.087vw), 0.871rem);
  --caption-lg-weight: 400;
  --caption-lg-line-height: 1.65;
  --caption-lg-letter-spacing: 0.03em;

  /* Type Scale - Caption */
  --caption-size: clamp(0.882rem, calc(0.906rem + -0.124vw), 0.813rem);
  --caption-weight: 400;
  --caption-line-height: 1.65;
  --caption-letter-spacing: 0.03em;

  /* Type Scale - Caption Small */
  --caption-sm-size: clamp(0.845rem, calc(0.877rem + -0.156vw), 0.759rem);
  --caption-sm-weight: 400;
  --caption-sm-line-height: 1.65;
  --caption-sm-letter-spacing: 0.03em;

  /* Type Scale - Overline */
  --overline-size: clamp(0.811rem, calc(0.848rem + -0.185vw), 0.709rem);
  --overline-weight: 500;
  --overline-line-height: 1.65;
  --overline-letter-spacing: 0.03em;
}

/* ============================================
   FONT FACE DECLARATIONS
   ============================================ */

@font-face {
  font-family: basefont;
  /* IBM Plex Sans medium as primary UI text */
  src: url("../../fonts/IBMPlexSans-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: basefont;
  /* IBM Plex Sans semibold for heavier headings if needed */
  src: url("../../fonts/IBMPlexSans-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: monofont;
  /* IBM Plex Mono for code/mono-styled text */
  src: url("../../fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
}

/* ============================================
   BASE STYLES
   ============================================ */

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--accent4-color);
}

/* Text Selection Styles */
::-moz-selection {
  color: var(--color-1);
  background: var(--color-3);
}

::selection {
  color: var(--color-1);
  background: var(--color-3);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* Headings */
h1 {
  color: var(--color-1);
  font-family: basefont;
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
}

h2 {
  display: flex;
  color: var(--color-1);
  font-family: basefont;
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

h3 {
  text-wrap: pretty;
  color: var(--color-1);
  font-family: basefont;
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-line-height);
  letter-spacing: var(--h3-letter-spacing);
}

h4,
h4>a {
  color: var(--color-2);
  display: inline-block;
  font-family: monofont;
  text-transform: uppercase;
  font-size: var(--caption-size);
  font-weight: var(--caption-weight);
  line-height: var(--caption-line-height);
  letter-spacing: var(--caption-letter-spacing);
}

/* Paragraphs and Lists */
p,
li {
  color: var(--color-2);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  margin-top: 0rem;
  margin-bottom: 0.5777778rem;
  font-family: basefont;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
}

p b,
li b {
  font-weight: 500;
 color: var(--accent-color);
}

/* Caption Large */
.caption-lg {
  color: var(--color-1);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-line-height);
  letter-spacing: var(--h4-letter-spacing);
  font-family: basefont;

  margin-top: 0rem;
  margin-bottom: 0.5777778rem;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
}

/* Caption Small */
.caption-sm,
tr,
td {
  color: var(--color-2);
  font-size: var(--caption-sm-size);
  font-weight: var(--caption-sm-weight);
  line-height: var(--caption-sm-line-height);
  letter-spacing: var(--caption-sm-letter-spacing);
  font-family: basefont;
  margin-top: 0rem;
  margin-bottom: 0.5777778rem;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-wrap: pretty;
}


/* Important Text */
.important-text {
  color: var(--accent-color);
}

/* Important Background */
.important-background {
  background-color: var(--accent-color);
}

/* Lists */
ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  color: var(--color-2);
  font-family: basefont;
}

ol li {
  padding-left: 0.5em;
}

ol li::marker {
  color: var(--color-2);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  font-family: basefont;
}

/* Highlight and Emphasis */
b>h4,
.higlight {
  padding: 2px 4px;
  background-color: var(--accent-color);
  color: var(--color-1);
}

/* Active sidebar link */
.sidebar-link {
  transition: background-color 0.3s ease, padding 0.3s ease;
}

.sidebar-link.active {
  background-color: var(--color-3);
  padding: 2px 4px;
  display: inline-block;
}

/* Ensure h4 containing active sidebar link displays correctly */
h4 .sidebar-link.active {
  display: inline-block;
}

/* Solution section background */
.solution-bg {
  background-color: var(--accent3-color);
  padding: 1.5rem;

}

.logo-container {
  max-width: 200px;
}
.orange-text {
  color: var(--color-1);
}
.orange-card{
  margin: 1rem;

  background-color: var(--accent-color);
  padding: 0.5rem;
  animation: rotate-simple 0.25s ease-in-out;
  animation-fill-mode: forwards;
  box-shadow: 10px var(--color-3)
}
.white-card{
  background-color: var(--color-3);
  padding: 0.5rem;
  animation: rotate-simple 0.25s ease-in-out;
  animation-fill-mode: forwards;
  box-shadow: 10px var(--color-3)
}
@keyframes rotate-simple {
  0% {
    transform: translateY(-110px);
    transform: rotate(0deg);
    opacity: 0.2;
  }
  30% {
    transform: translateY(0px);
    transform: rotate(0deg);
    opacity: 1;
  }

  75% {
    transform: rotate(8.7deg);
    opacity: 1;

  }

  100% {
    transform: rotate(10deg);
    opacity: 1;

  }
}

/* Color background */
.colorbg {
  background-color: var(--color-3);
  padding: 1.5rem;

}

/* Remove max-width constraint for paragraphs inside solution-bg */
.solution-bg p {
  max-width: 100%;
  min-height: 3.5rem;
}

/* Blank background - same formatting as solution-bg but without background color */
.blank-bg {
  padding: 1.5rem;
}

.blank-bg p {
  max-width: 100%;
  min-height: 3.5rem;
}

/* Important section background */
.important-bg {
  background-color: var(--color-3);
  padding: 1.5rem;
}

/* Quote styling with left border and gradient background */
.quote {
  border-left: 4px solid var(--accent-color);
  background: var(--accent3-color);
  padding: 1.5rem;
  color: var(--accent-color);
}



/* Content width constraint for text sections */
.content-width {
  max-width: 100%;
}

@media (min-width: 768px) {
  .content-width {
    max-width: 75%;
  }
}

/* Full width class for flex-rows and images */
.full {
  width: 100%;
}




.container {
  max-width: 100vw;
  padding: 0rem 2rem;
}

/* Sidebar Border */
.sidebar-border {
  border-right: 2px solid var(--color-3);
}

/* Header Bottom Border */
.header-border {
  border-bottom: 2px solid var(--color-3);
}



/* Card Border and Hover Effects */
.greyborder {
  transition: all 0.5s ease;
  background-color: var(--color-4);
  box-shadow: 0 0 0 2px var(--color-3);
}

.parent:hover .greyborder {
  transform: scale(1.01);
  animation-duration: 4s;
  box-shadow: 0 0 0 2px var(--color-3), 0 0 0 2.2px var(--color-3);
}

/* Child Element Transitions */
.child {
  width: 100%;
  transition: all ease-in-out 0.5s;
}

.parent:hover .child {
  width: 30rem;
}

/* Image Classes with View Transitions */
.image1 {
  object-fit: contain;
  view-transition-name: image1;
}

.image2 {
  object-fit: contain;
  view-transition-name: image2;
}

.image3 {
  object-fit: contain;
  view-transition-name: image3;
}

.image4 {
  object-fit: contain;
  view-transition-name: image4;
}

/* ============================================
   VIEW TRANSITIONS
   ============================================ */

@view-transition {
  navigation: auto;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Larger Desktop (max-width: 1024px) */
@media (max-width: 1024px) {
  .container {
    max-width: 100vw;
    padding: 0rem 4rem;
  }
}

/* Medium Size (max-width: 767px) */
@media (max-width: 767px) {
  /* Add medium screen styles here if needed */
}

/* Small Size (max-width: 640px) */
@media (max-width: 640px) {
  .container {
    padding: 0rem 2rem;
  }
}

.orange-highlight {
 
  display: inline-block;
}

.rough-underline{
 
}

.hiddenproject {
  position: relative;
  cursor: not-allowed;
}

.hiddenproject-content {
  opacity: 0.4;
}

.hiddenproject a {
  pointer-events: none;
  cursor: not-allowed;
  position: relative;
  display: block;
}

.coming-soon-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: none;
  z-index: 10;
}