:root {
  /* Landscape-only adjustable offsets for Design Process cards */
  --dp-landing-top-landscape: 0px;
  --dp-goals-top-landscape: 33px;
  --dp-transactions-top-landscape: 66px;
  --dp-analytics-top-landscape: 99px;
  --dp-calculator-top-landscape: 132px;
  --dp-tips-top-landscape: 165px;
}

/* Prevent horizontal overflow */
body {
  overflow-x: hidden;
  box-sizing: border-box;
}

.container {
  max-width: 100%;
  overflow-x: hidden;
}

@media screen and (max-width: 768px) and (orientation: portrait) {
  body {
    font-size: 16px;
    /* Increased base font size for mobile */
  }

  *,
  *:before,
  *:after {
    box-sizing: border-box;
  }

  div {
    max-width: 100%;
  }

  .page-title {
    font-size: 1.5rem;
  }

  .section-title {
    font-size: 1.4rem;
  }

  .main-content {
    padding: 1rem !important;
    gap: 2rem !important;
  }

  /* Scale down container widths */
  div[style*="max-width: 60%"],
  div[style*="max-width: 1200px"],
  div[style*="max-width: 1135px"] {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Scale down flex layouts */
  div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1rem !important;
  }

  /* Problem Statement Section: Make header and text appear side by side on desktop,
     but ensure image comes after both elements on mobile */
  .problem-statement-section {
    display: flex;
    flex-direction: row;
    gap: 6rem;
  }

  @media screen and (max-width: 768px) and (orientation: portrait) {

    /* Mobile: arrange the elements properly */
    .problem-statement-section {
      flex-direction: column;
    }

    .problem-statement-section>div[style*="max-width: 60%"],
    .problem-statement-section>div[style*="font-size: 1.15rem"] {
      width: 100% !important;
      max-width: 100% !important;
    }

    /* Position the image after both the heading and paragraph */
    .problem-statement-section>.igrad-image-wrapper {
      order: 2;
      /* Ensure image appears after both text elements */
      margin-top: 2rem !important;
    }

    /* Role & Responsibilities section: make heading stack on top of paragraph on mobile */
    .role-responsibilities-section {
      flex-direction: column;
    }

    .role-responsibilities-section>div[style*="max-width: 60%"],
    .role-responsibilities-section>div[style*="font-size: 1.15rem"] {
      width: 100% !important;
      max-width: 100% !important;
    }
  }

  div[style*="width: 33%"],
  div[style*="width: 40%"],
  div[style*="width: 60%"] {
    width: 100% !important;
  }

  div[style*="width:"] {
    max-width: 100% !important;
  }

  .image-link {
    width: 100% !important;
  }

  .image-link img {
    width: 100% !important;
    height: auto !important;
  }

  /* Scale down text positioning relative to mockup */
  div[style*="position: relative"] {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Fix positioned elements in Design Process section (portrait only) */
  div[style*="position: relative; top:"] {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1rem 0 !important;
  }
}

/* Landscape MOBILE: enable adjustable offsets for the six DP blocks only */
@media screen and (max-width: 900px) and (orientation: landscape) {

  .dp-landing,
  .dp-goals,
  .dp-transactions,
  .dp-analytics,
  .dp-calculator,
  .dp-tips {
    position: relative !important;
    display: block !important;
  }

  .dp-landing {
    top: var(--dp-landing-top-landscape) !important;
  }

  .dp-goals {
    top: var(--dp-goals-top-landscape) !important;
  }

  .dp-transactions {
    top: var(--dp-transactions-top-landscape) !important;
  }

  .dp-analytics {
    top: var(--dp-analytics-top-landscape) !important;
  }

  .dp-calculator {
    top: var(--dp-calculator-top-landscape) !important;
  }

  .dp-tips {
    top: var(--dp-tips-top-landscape) !important;
  }

  /* Keep normalization for other elements */
  div[style*="position: relative; top:"]:not(.dp-landing):not(.dp-goals):not(.dp-transactions):not(.dp-analytics):not(.dp-calculator):not(.dp-tips) {
    position: static !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1rem 0 !important;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 14px;
    /* Increased base font size for smaller mobile */
  }

  .page-title {
    font-size: 1.3rem;
  }

  .section-title {
    font-size: 1.2rem;
  }

  ul,
  ol,
  p {
    font-size: 1rem !important;
    /* Increased paragraph font size for mobile */
  }
}

/* Mobile footer sizing */
@media screen and (max-width: 768px) {
  .site-footer {
    padding: 1.5rem 0 1rem !important;
    font-size: 0.875rem !important;
  }

  .site-footer nav {
    font-size: 0.875rem !important;
  }

  .site-footer nav a,
  .site-footer nav .link-text {
    font-size: 0.875rem !important;
  }

  .site-footer p {
    font-size: 0.75rem !important;
    margin-top: 0.5rem !important;
  }
}

@media screen and (max-width: 480px) {
  .site-footer {
    padding: 1rem 0 0.75rem !important;
  }

  .site-footer nav {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .site-footer nav span {
    margin: 0 0.25rem;
  }
}

/* Mobile scroll up arrow positioning */
@media (max-width: 600px) {
  button[onclick*="scrollTo"] {
    right: 0rem !important;
    bottom: 1rem !important;
  }
}

/* Dark mode text color for Design Process cards */
[data-theme="dark"] .dp-landing>div,
[data-theme="dark"] .dp-goals>div,
[data-theme="dark"] .dp-transactions>div,
[data-theme="dark"] .dp-analytics>div,
[data-theme="dark"] .dp-calculator>div,
[data-theme="dark"] .dp-tips>div {
  color: #000 !important;
}

[data-theme="dark"] .dp-landing>div>p,
[data-theme="dark"] .dp-goals>div>p,
[data-theme="dark"] .dp-transactions>div>p,
[data-theme="dark"] .dp-analytics>div>p,
[data-theme="dark"] .dp-calculator>div>p,
[data-theme="dark"] .dp-tips>div>p {
  color: #000 !important;
}

/* Magnate link styles */
#magnate-link {
  color: #1143b0;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
  display: inline-block;
}

#magnate-link:hover,
#magnate-link:focus {
  color: #518be5;
  text-decoration: underline;
}

#magnate-link:active {
  color: #518be5;
  transition: color 0.1s ease;
}