/*
Theme Name: Theme 101
Theme URI: 
Author: That Website Is Me
Author URI: 
Description: 
Version: 1.1.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theme101
*/

/* Fix title links text underline */
.wp-block-query .wp-block-post-title a {
  text-decoration: inherit;
}

/* Video Fix - Margin Fix */
figure.wp-block-embed.is-type-video {
  margin: 0;
}

/* Mobile Canva Menu Fix */
.wp-block-navigation__responsive-dialog {
  padding: 20px;
}

/* Mobile Menu Icon Style */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  padding: 12px;
  border: 1px solid #eee;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list,
.wp-block-navigation__responsive-container-content .wp-block-navigation__container {
  width: 100%;
  align-items: flex-start !important;
  text-align: left;
}

.wp-block-navigation__responsive-container-content .wp-block-navigation__container .wp-block-navigation__submenu-container {
  align-items: flex-start !important;
  text-align: left;
}

/* include block supports */
.has-text-align-center {
  text-align: center;
  justify-content: center;
}

.has-text-align-left {
  text-align: left;
  justify-content: start;
}

.has-text-align-right {
  text-align: right;
  justify-content: end;
}

/* inline-image button fix - center the inline image */
.wp-block-read-more,
.wp-block-button__link {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wp-block-read-more>img:only-of-type,
.wp-block-button__link>img:only-of-type {
  margin-left: 0;
  /* Reset left margin */
  margin-right: 0;
  /* Reset right margin */
}

/* footer title link fix */
footer .wp-block-query a {
  text-decoration: none;
  font-weight: 300;
}

/* Scroll Effect */
.scroll-flex {
  overflow-x: hidden;
  margin: 24px 0px;

  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  /* Required for shadow positioning */
}

.scroll-flex::-webkit-scrollbar {
  display: none;
}

.scroll-flex>ul {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 14px;
  scroll-snap-type: x mandatory;
  overflow: visible;
  overflow-x: auto;
  margin: 24px 0px;
}

.scroll-flex>ul:hover {
  overflow-x: scroll;
}

@media (max-width:781px) {
  .scroll-flex>ul {
    overflow-x: scroll;
  }
}

.scroll-flex>ul>li {
  width: 100%;
  max-width: 500px;
  min-width: 300px;
  scroll-snap-align: start;
  display: inline-block;
  /* overflow: hidden; */
}

.scroll-flex.scroll-shadow::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 100%;
  background: linear-gradient(to left, currentColor 0%, transparent 100%);
  opacity: 0.2;
  /* Adjust opacity for subtle effect */
  pointer-events: none;
  z-index: 10;
}

.scroll-flex.scroll-shadow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 100%;
  background: linear-gradient(to right, currentColor 0%, transparent 100%);
  opacity: 0;
  /* Hidden by default */

  pointer-events: none;
  z-index: 10;
  opacity: 0;
  /* Hidden by default */
}

.scroll-flex.scroll-shadow[style*="scroll"]::before {
  opacity: 0.2;
  /* Match right shadow opacity */
}

/* Responsive adjustments */
@media (max-width: 768px) {

  .scroll-flex.scroll-shadow::after,
  .scroll-flex.scroll-shadow::before {
    width: 30px;
  }
}

.scroll-flex:hover .wp-block-post {
  cursor: grab;
}

/* Optional arrows class for scroll indication */
.scroll-flex.scroll-arrows::before,
.scroll-flex.scroll-arrows::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  background: currentColor;
  /* Inherit font color */
  opacity: 0.5;
  /* Semi-transparent background */
  /* Semi-transparent dark background */
  border-radius: 50%;
  /* Circular arrow container */
  z-index: 20;
  pointer-events: none;
  /* Prevent interference with scrolling */
  transform: translateY(-50%);
  transition: opacity 0.3s ease;
}

/* Left arrow */
.scroll-flex.scroll-arrows::before {
  left: var(--wp--preset--spacing--s-space);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>');
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Right arrow */
.scroll-flex.scroll-arrows::after {
  right: var(--wp--preset--spacing--s-space);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>');
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hide left arrow at start (basic CSS approximation) */
.scroll-flex.scroll-arrows:not([style*="scroll"])::before {
  opacity: 0;
}

/* hover buttons */
.fixed-bl {
  position: fixed;
  left: 25px;
  bottom: 25px;
  z-index: 10;
}

.fixed-br {
  position: fixed;
  right: 25px;
  bottom: 25px;
  z-index: 10;
}

.fixed-tr {
  position: fixed;
  right: 25px;
  top: 25px;
  z-index: 10;
}

.fixed-tl {
  position: fixed;
  left: 25px;
  top: 25px;
  z-index: 10;
}

/* Mobile Responsive Layouts */
@media (max-width:781px) {

  /* Load block style variations */
  .wp-block-columns.is-style-mobile-reverse:not(.is-not-stacked-on-mobile) {
    flex-direction: column-reverse;
  }

  .m-center-text {
    text-align: center;
  }

  .m-center-alignment {
    margin-left: auto !important;
    margin-right: auto !important;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .wp-block-image.m-center-alignment {
    text-align: center;
  }

  .wp-block-buttons.m-center-alignment {
    flex-direction: row;
    justify-content: center;
  }

  /* legacy styles */
  .m-rev.wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-direction: column-reverse;
  }
}


/* WooCommerce */

/* fix button sizing */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart button[name="add-to-cart"] {
  padding: .64rem 1.1rem;
  line-height: 2;
  height: 3.5rem;
}

/* WooCommerce Fixes */
.woocommerce .quantity .qty {
  min-width: 80px;
}

.woocommerce div.product div.summary {
  gap: 12px;
  display: flex;
  flex-direction: column;
}

.woocommerce .woocommerce-ordering select,
.woocommerce table.variations tr td select {
  min-width: auto;
  width: 100%;
  color: #000;
  max-width: 400px;
  height: 3.5rem;
  padding: 0.9rem 1.1rem;
  display: inline-block;
  margin-right: 1em;
  border-radius: 0;
  border: 0;
  line-height: 2em;
  background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%, #ffffff;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.woocommerce .quantity .qty {
  height: 3.5rem;
  padding: 0.9rem 1.1rem;
  display: inline-block;
  margin-right: 1em;
  border-radius: 0;
  border: 0;
  line-height: 2em;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.woocommerce ul.products li.product a img,
.editor-styles-wrapper .wc-block-grid__products .wc-block-grid__product .wc-block-components-product-image img,
.wc-block-components-product-image img {
  aspect-ratio: 1;
}

/* Fix varation dropdown select */
.woocommerce div.product form.cart .variations tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.woocommerce .oxy-woo-element div.product form.cart table.variations tr,
.woocommerce table.variations tr {
  display: flex;
  flex-direction: column;
}

.woocommerce div.product form.cart table.variations td,
.woocommerce div.product form.cart table.variations th {
  display: flex;
  align-content: start;
  flex-direction: column;
}

.woocommerce div.product form.cart .variations label {
  margin-bottom: 0;
}

/* overrides */
/* Support Classes */
.overflow-hidden {
  overflow: hidden;
}

.hidden {
  display: none;
}

/* full item link */
.full-link-item.wp-block-query>ul>li {
  position: relative;
}

.full-link-item .link-button.wp-block-read-more {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.wp-block-read-more.is-style-transparent-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent !important;
  color: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-width: 100%;
  min-height: 100%;
  z-index: 2;
  pointer-events: auto;
  content: '';
}

/* fix for category text-decoration */
.wp-block-post-terms>a {
  text-decoration: inherit;
}

/* Hide menu items on desktop - good for mobile showing items */
@media (min-width: 600px) {
  .mobile-only {
    display: none !important;
  }
}

/* -------------------------------------------------------------
   DSGNK Parity: Sticky Overlay Header & Section Scroll Snap Lock
   ------------------------------------------------------------- */
header.wp-block-template-part {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  pointer-events: none;
  transition: top 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

header.wp-block-template-part > * {
  pointer-events: auto;
}

body.dsgnk-header-hidden header.wp-block-template-part:not(:has(.is-menu-open)) {
  top: -120px !important;
}

.admin-bar header.wp-block-template-part {
  top: 32px;
}

body.dsgnk-header-hidden.admin-bar header.wp-block-template-part:not(:has(.is-menu-open)) {
  top: -120px !important;
}

@media (max-width: 782px) {
  .admin-bar header.wp-block-template-part {
    top: 46px;
  }
}

.dsgnk-header {
  position: relative;
  width: 100%;
  z-index: 9999;
  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
}

.dsgnk-header.is-scrolled,
header.wp-block-template-part.is-scrolled .dsgnk-header {
  background-color: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.dsgnk-header .wp-block-site-logo {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

.dsgnk-header .wp-block-site-logo .custom-logo,
.dsgnk-header .dsgnk-logo-img {
  height: 40px;
  width: auto;
  display: block;
}

.dsgnk-header nav.wp-block-navigation {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  width: auto !important;
  margin: 0 !important;
}

.dsgnk-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
  display: flex !important;
  position: static !important;
  background-color: transparent !important;
}

.dsgnk-header .wp-block-navigation__container {
  display: flex !important;
  flex-direction: row !important;
  gap: 28px !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dsgnk-header .wp-block-navigation-item {
  position: relative;
}

.dsgnk-header .wp-block-navigation-item__content {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  transition: color 0.2s ease !important;
  text-decoration: none !important;
  padding: 8px 12px !important;
}

.dsgnk-header .wp-block-navigation-item__content:hover,
.dsgnk-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: var(--dsgnk-yellow, #ffdd23) !important;
}

.dsgnk-header .wp-block-navigation-item.has-child {
  display: flex !important;
  align-items: center !important;
}

.dsgnk-header .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
  flex: 1 1 auto !important;
  padding: 8px 6px 8px 12px !important;
}

.dsgnk-header .wp-block-navigation-submenu__toggle {
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 8px 0 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

.dsgnk-header .wp-block-navigation-submenu__toggle svg {
  display: block !important;
  margin: 0 !important;
  vertical-align: middle !important;
  position: relative !important;
  top: -1px !important;
}

.dsgnk-header .wp-block-navigation__submenu-container {
  background-color: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  padding: 8px 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important;
}

.dsgnk-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
  width: 100% !important;
}

.dsgnk-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 0.85rem !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  padding: 8px 20px !important;
  white-space: nowrap !important;
}

/* Burger Button: Hidden by default on Desktop (> 782px) */
.dsgnk-header .wp-block-navigation__responsive-container-open {
  display: none !important;
  color: #ffffff;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.dsgnk-header .wp-block-navigation__responsive-container-open:hover,
.dsgnk-header .wp-block-navigation__responsive-container-open:focus {
  color: var(--dsgnk-yellow, #ffdd23);
}

.dsgnk-header .wp-block-navigation__responsive-container-open svg {
  fill: currentColor;
  width: 24px;
  height: 24px;
}

.dsgnk-header .wp-block-navigation__responsive-container-close {
  color: #ffffff;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.dsgnk-header .wp-block-navigation__responsive-container-close:hover {
  color: var(--dsgnk-yellow, #ffdd23);
}

.dsgnk-header .wp-block-navigation__responsive-container.is-menu-open {
  background-color: rgba(0, 0, 0, 0.98) !important;
}

@media (max-width: 782px) {
  .dsgnk-header {
    padding: 12px 16px !important;
  }
  .dsgnk-header.is-scrolled,
  header.wp-block-template-part.is-scrolled .dsgnk-header {
    padding: 10px 16px !important;
  }
  .dsgnk-header .wp-block-site-logo .custom-logo,
  .dsgnk-header .dsgnk-logo-img {
    height: 30px;
  }
  .dsgnk-header .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }
  .dsgnk-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
  .dsgnk-header .wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    z-index: 999999 !important;
    background-color: rgba(0, 0, 0, 0.98) !important;
    padding: 24px 20px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Reset desktop flex-row, absolute submenus, and forced heights when mobile menu is open */
  .dsgnk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .dsgnk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: stretch !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .dsgnk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100% !important;
    position: static !important;
    display: block !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .dsgnk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
    display: block !important;
    width: 100% !important;
    position: relative !important;
  }

  .dsgnk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 1.1rem !important;
    padding: 14px 0 !important;
    width: 100% !important;
    display: inline-block !important;
    box-sizing: border-box !important;
  }

  .dsgnk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
    position: absolute !important;
    right: 0 !important;
    top: 10px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
  }

  .dsgnk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
    position: static !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 10px 16px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .dsgnk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
    border-bottom: none !important;
  }

  .dsgnk-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 0.95rem !important;
    padding: 8px 0 !important;
    color: rgba(255, 255, 255, 0.85) !important;
  }
}

/* Section Scroll Snap Lock & Live DSGNK Visual Parity */
html:has(.dsgnk-page-section),
html:has(.page__section),
html.has-scroll-snap {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  background: #000000;
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
}

body:has(.dsgnk-page-section),
body:has(.page__section),
body.has-scroll-snap {
  height: 100%;
}

/* Ensure headings on black background are crisp white */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  color: #ffffff;
}

/* Standard pages without full-screen sections: offset top for fixed header */
body:not(:has(.dsgnk-page-section)):not(:has(.page__section)) .entry-content,
body:not(:has(.dsgnk-page-section)):not(:has(.page__section)) .wp-block-post-content,
body:not(:has(.dsgnk-page-section)):not(:has(.page__section)) main {
  padding-top: 100px;
  min-height: 80vh;
  box-sizing: border-box;
}

/* Header backdrop on standard pages */
body:not(:has(.dsgnk-page-section)):not(:has(.page__section)) .dsgnk-header {
  background-color: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dsgnk-page-section,
.page__section {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--dsgnk-black, #000000);
  overflow: hidden;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.dsgnk-section-bg:not(.dsgnk-section-bg-map),
.section__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  z-index: 1;
  pointer-events: none;
}

.dsgnk-section-bg-picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.dsgnk-section-inner,
.section__container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 100vh;
  height: 100%;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 0;
}

.dsgnk-page-section.has-map-bg .dsgnk-section-inner,
.page__section.has-map-bg .section__container {
  pointer-events: none !important;
}

.dsgnk-page-section.has-map-bg .dsgnk-section-inner a,
.dsgnk-page-section.has-map-bg .dsgnk-section-inner button,
.dsgnk-page-section.has-map-bg .dsgnk-section-inner .dsgnk-sidebar-nav,
.dsgnk-page-section.has-map-bg .dsgnk-section-inner .dsgnk-content-area > * {
  pointer-events: auto !important;
}

.dsgnk-section-box,
.section__container__box {
  width: 100% !important;
  max-width: 1180px !important;
  height: 100% !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  padding: 10% 40px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px !important;
}

.dsgnk-sidebar-nav,
.container__left {
  align-self: flex-end !important;
  width: 50% !important;
  max-width: 50% !important;
  flex: 0 0 calc(50% - 20px) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  top: auto !important;
}

.dsgnk-content-area,
.container__right {
  align-self: flex-end !important;
  width: 50% !important;
  max-width: 50% !important;
  flex: 0 0 calc(50% - 20px) !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Left Indicator Navigation (matching dsgnk.com .left__title_list) */
.container__left ul,
.dsgnk-nav-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.container__left li,
.dsgnk-nav-item {
  margin: 0 !important;
  padding: 0 !important;
}

.left__title_list,
.dsgnk-sidebar-nav .dsgnk-nav-link,
.container__left a {
  position: relative !important;
  display: block !important;
  outline: none !important;
  text-decoration: none !important;
  letter-spacing: 1px !important;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3) !important;
  overflow: hidden !important;
  transform: none !important;
  transition: none !important;
}

.left__title_list .hover__title,
.dsgnk-sidebar-nav .dsgnk-nav-link .hover__title,
.container__left a .hover__title {
  font-family: 'Source Sans Pro', sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #ffdd23 !important;
  text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4) !important;
  position: relative !important;
  display: inline-block !important;
  -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  text-transform: uppercase !important;
  width: 100% !important;
  line-height: 1.2 !important;
  vertical-align: top !important;
  overflow: visible !important;
}

.left__title_list .hover__title::before,
.dsgnk-sidebar-nav .dsgnk-nav-link .hover__title::before,
.container__left a .hover__title::before {
  color: #ffffff !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  content: attr(data-hover) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  width: 100% !important;
}

/* Hover & Focus triggers on link or title */
.left__title_list:hover .hover__title,
.left__title_list:focus .hover__title,
.left__title_list .hover__title:hover,
.left__title_list .hover__title:focus,
.dsgnk-sidebar-nav .dsgnk-nav-link:hover .hover__title,
.dsgnk-sidebar-nav .dsgnk-nav-link:focus .hover__title,
.container__left a:hover .hover__title,
.container__left a:focus .hover__title,
.container__left li:hover .hover__title {
  -webkit-transform: translateY(-100%) !important;
  transform: translateY(-100%) !important;
}

/* Active section indicator */
.left__title_list.left__title .hover__title,
.left__title_list.left__title h1,
.dsgnk-sidebar-nav .dsgnk-nav-item.is-current .hover__title,
.dsgnk-sidebar-nav .dsgnk-nav-link.is-active .hover__title,
.container__left .is-active .hover__title {
  color: #ffffff !important;
  font-size: 50px !important;
  line-height: 1em !important;
  font-weight: 700 !important;
}

.left__title_list.left__title .hover__title::before,
.dsgnk-sidebar-nav .dsgnk-nav-item.is-current .hover__title::before,
.dsgnk-sidebar-nav .dsgnk-nav-link.is-active .hover__title::before,
.container__left .is-active .hover__title::before {
  color: #ffdd23 !important;
}

/* Right Content Area */
.dsgnk-content-area,
.container__right {
  color: #ffffff;
  text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4);
  padding-left: 20px;
  border-left: 6px #ffffff solid;
  text-justify: inter-word;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
}

.dsgnk-content-area h1,
.dsgnk-content-area h2,
.container__right h1,
.container__right h2 {
  display: none !important;
}

.dsgnk-content-area p,
.container__right p {
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 1em;
}

/* CTA Button */
.dsgnk-content-area .wp-block-button,
.dsgnk-content-area .container__button {
  position: relative;
  text-align: right;
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1em;
}

.dsgnk-content-area .wp-block-button__link,
.container__button a {
  color: #ffdd23 !important;
  border: 2px solid #ffdd23 !important;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 700;
  font-size: 1.2em;
  padding: 0.6em 1em;
  text-align: center;
  width: 100%;
  display: block;
  line-height: 1.5;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent !important;
  border-radius: 3px !important;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.dsgnk-content-area .wp-block-button__link:hover,
.container__button a:hover {
  border-color: transparent !important;
  background: rgba(255, 221, 35, 0.1) !important;
  color: #ffffff !important;
}

html:has(.dsgnk-page-section) footer.wp-block-template-part,
html:has(.page__section) footer.wp-block-template-part,
html.has-scroll-snap footer.wp-block-template-part,
.dsgnk-footer {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

@media (max-width: 992px) {
  html:has(.dsgnk-page-section),
  html:has(.page__section),
  html.has-scroll-snap {
    scroll-snap-type: y proximity;
  }

  .dsgnk-page-section,
  .page__section {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
  }

  .dsgnk-section-inner,
  .section__container {
    position: relative !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  .section__container .section__container__box,
  .dsgnk-section-box {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: stretch !important;
    padding: 100px 24px 48px 24px !important;
    gap: 20px !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
  }

  .container__left,
  .dsgnk-sidebar-nav {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    margin-bottom: 8px !important;
  }

  .container__right,
  .dsgnk-content-area {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    border: 0px !important;
    padding: 0px !important;
  }

  .container__right p,
  .dsgnk-content-area p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.2em !important;
  }

  .left__title_list .hover__title,
  .dsgnk-nav-link .hover__title {
    font-size: 1em;
  }

  .left__title_list.left__title .hover__title,
  .dsgnk-nav-link.is-active .hover__title {
    font-size: 1.6em !important;
    line-height: 1.3em !important;
  }

  .left__title_list.left__parent_title .hover__title,
  .dsgnk-nav-parent-title .hover__title {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }

  .dsgnk-content-area .wp-block-button,
  .dsgnk-content-area .container__button {
    text-align: left !important;
    margin-top: 1.5em !important;
    margin-bottom: 0 !important;
  }

  .dsgnk-content-area .wp-block-button__link,
  .container__button a {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1.1em !important;
    padding: 12px 20px !important;
    text-align: center !important;
  }

  .dsgnk-page-section.has-map-bg .dsgnk-section-inner,
  .page__section.has-map-bg .section__container {
    pointer-events: none !important;
  }

  .dsgnk-page-section.has-map-bg .dsgnk-section-inner a,
  .dsgnk-page-section.has-map-bg .dsgnk-section-inner button,
  .dsgnk-page-section.has-map-bg .dsgnk-section-inner .dsgnk-sidebar-nav,
  .dsgnk-page-section.has-map-bg .dsgnk-section-inner .dsgnk-content-area > * {
    pointer-events: auto !important;
  }
}

/* -------------------------------------------------------------
   Projects Grid & Marley Cards (Zero spacing, Grayscale to Color)
   ------------------------------------------------------------- */
.wp-block-dsgnk-project-grid,
.dsgnk-project-grid-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.entry-content:has(.dsgnk-project-grid-wrapper),
.wp-block-post-content:has(.dsgnk-project-grid-wrapper),
.dsgnk-taxonomy-project-main,
.dsgnk-archive-project-main,
.dsgnk-taxonomy-project-main .wp-block-group,
.dsgnk-archive-project-main .wp-block-group {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.dsgnk-project-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.dsgnk-project-card-wrap {
  width: 25% !important;
  flex: 0 0 25% !important;
  max-width: 25% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 1200px) {
  .dsgnk-project-card-wrap {
    width: 33.333% !important;
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}

@media (max-width: 980px) {
  .dsgnk-project-card-wrap {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}

@media (max-width: 600px) {
  .dsgnk-project-card-wrap {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

.dsgnk-marley-card {
  position: relative !important;
  overflow: hidden !important;
  background: #000000 !important;
  height: 300px !important;
  margin: 0 !important;
  cursor: pointer !important;
}

.dsgnk-marley-card img {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.8 !important;
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
  -webkit-transition: opacity 0.35s ease, filter 0.35s ease, -webkit-filter 0.35s ease, transform 0.35s ease !important;
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease !important;
}

.dsgnk-marley-card:hover img {
  opacity: 1 !important;
  filter: grayscale(0%) !important;
  -webkit-filter: grayscale(0%) !important;
  transform: scale(1.05) !important;
}

/* Single Team Layout & Social Link Icons */
.dsgnk-single-team-section {
  position: relative !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
}

.container__socials,
.dsgnk-social-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-top: 24px !important;
}

.container__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: transform 0.25s ease !important;
}

.container__icon svg {
  width: 44px !important;
  height: 44px !important;
  fill: #ffdd23 !important;
  transition: fill 0.25s ease, transform 0.25s ease !important;
}

.container__icon:hover {
  transform: translateY(-2px) !important;
}

.container__icon:hover svg {
  fill: #ffffff !important;
}

/* ==========================================================================
   Single Project Page Layout & Lightbox Gallery
   ========================================================================== */
.dsgnk-project-single {
  width: 100% !important;
  color: #ffffff !important;
  background-color: #000000 !important;
}

.dsgnk-project-hero-grid {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  user-select: none !important;
}

.dsgnk-project-hero-grid .effect-marley {
  width: 100% !important;
  max-width: 100% !important;
  height: 500px !important;
  max-height: 600px !important;
  position: relative !important;
  overflow: hidden !important;
  background: #000000 !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: flex !important;
}

.dsgnk-project-hero-grid .effect-marley img {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  opacity: 0.8 !important;
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
  -webkit-transition: opacity 0.35s ease, filter 0.35s ease, -webkit-filter 0.35s ease, transform 0.35s ease !important;
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease !important;
}

.dsgnk-project-hero-grid .effect-marley:hover img {
  opacity: 1 !important;
  filter: grayscale(0%) !important;
  -webkit-filter: grayscale(0%) !important;
  transform: scale(1.03) !important;
}

.dsgnk-project-hero-grid .effect-marley figcaption {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 40px !important;
  color: #fff !important;
  text-transform: uppercase !important;
  text-align: right !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

.dsgnk-project-hero-grid .effect-marley h1 {
  color: #fff !important;
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.4) !important;
  position: relative !important;
  top: 40px !important;
  margin: 0 !important;
  -webkit-transition: -webkit-transform 0.35s ease !important;
  transition: transform 0.35s ease !important;
  -webkit-transform: translate3d(0, 20px, 0) !important;
  transform: translate3d(0, 20px, 0) !important;
}

.dsgnk-project-hero-grid .effect-marley:hover h1 {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

.dsgnk-project-hero-grid .effect-marley p.para {
  position: absolute !important;
  right: 40px !important;
  bottom: 40px !important;
  margin: 0 !important;
  padding: 10px 0 !important;
  font-size: 0.85rem !important;
  letter-spacing: 1px !important;
  line-height: 1.5 !important;
  color: #fff !important;
  text-shadow: 0 0.08em 0 rgba(0, 0, 0, 0.4) !important;
  opacity: 0 !important;
  -webkit-transition: opacity 0.35s ease, -webkit-transform 0.35s ease !important;
  transition: opacity 0.35s ease, transform 0.35s ease !important;
  -webkit-transform: translate3d(0, 100%, 0) !important;
  transform: translate3d(0, 100%, 0) !important;
}

.dsgnk-project-hero-grid .effect-marley:hover p.para {
  opacity: 1 !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

/* 2-Column Split: Content/Team (Left) + Gallery (Right) */
.dsgnk-project-body-columns {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 48px 32px 80px 32px !important;
  gap: 48px !important;
  box-sizing: border-box !important;
}

.dsgnk-project-left-col {
  width: 50% !important;
  flex: 0 0 calc(50% - 24px) !important;
  max-width: calc(50% - 24px) !important;
  box-sizing: border-box !important;
}

.dsgnk-project-right-col {
  width: 50% !important;
  flex: 0 0 calc(50% - 24px) !important;
  max-width: calc(50% - 24px) !important;
  box-sizing: border-box !important;
}

.dsgnk-project-heading {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #ffdd23 !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.dsgnk-project-content {
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: #ffffff !important;
  margin-bottom: 40px !important;
}

.dsgnk-project-content p {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  color: #ffffff !important;
}

.dsgnk-project-content a {
  color: #ffdd23 !important;
  text-decoration: underline !important;
  transition: opacity 0.2s ease !important;
}

.dsgnk-project-content a:hover {
  opacity: 0.8 !important;
}

.dsgnk-project-team {
  margin-top: 36px !important;
}

.dsgnk-project-team-member {
  margin-bottom: 12px !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
}

.dsgnk-project-team-member a {
  color: #ffdd23 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.dsgnk-project-team-member a:hover {
  color: #ffffff !important;
}

/* Gallery Grid */
.dsgnk-project-gallery {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  justify-content: flex-start !important;
}

.dsgnk-gallery-item {
  position: relative !important;
  flex: 0 0 calc(50% - 8px) !important;
  width: calc(50% - 8px) !important;
  overflow: hidden !important;
  display: block !important;
  background-color: #111111 !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.dsgnk-gallery-item:hover {
  opacity: 0.9 !important;
  transform: translateY(-2px) !important;
}

.dsgnk-gallery-item-sizer {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 66.66% !important;
}

.dsgnk-gallery-item-contents {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.dsgnk-gallery-item-contents img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0 !important;
  display: block !important;
}

/* Responsive adjustments */
@media (max-width: 980px) {
  .dsgnk-project-hero-grid .effect-marley {
    height: 380px !important;
  }

  .dsgnk-project-hero-grid .effect-marley h1 {
    font-size: 1.8rem !important;
  }

  .dsgnk-project-body-columns {
    flex-direction: column !important;
    gap: 36px !important;
    padding: 32px 20px 60px 20px !important;
  }

  .dsgnk-project-left-col,
  .dsgnk-project-right-col {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .dsgnk-gallery-item {
    flex: 0 0 calc(50% - 8px) !important;
    width: calc(50% - 8px) !important;
  }
}

@media (max-width: 600px) {
  .dsgnk-project-hero-grid .effect-marley {
    height: 300px !important;
  }

  .dsgnk-project-hero-grid .effect-marley figcaption {
    padding: 24px !important;
  }

  .dsgnk-project-hero-grid .effect-marley p.para {
    right: 24px !important;
    bottom: 24px !important;
  }

  .dsgnk-gallery-item {
    flex: 0 0 100% !important;
    width: 100% !important;
  }
}