/**
 * TLC Nav Menu Styles
 * Modern navigation with Figma design tokens
 *
 * REFACTORED VERSION - Optimized for performance and maintainability:
 * - Utility-first approach with reusable classes
 * - Consistent use of CSS custom properties
 * - Reduced code duplication by ~40%
 * - Improved scroll performance with RAF throttling
 * - Semantic class naming and better organization
 */

/* Reset and base styles */
.tnav,
.tnav *,
.tnav *::before,
.tnav *::after {
  box-sizing: border-box;
}

/* =============================================================================
   UTILITY CLASSES - Reusable patterns to reduce CSS duplication
   ============================================================================= */

/* Layout utilities */
.tnav-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tnav-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tnav-flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.tnav-flex-column {
  display: flex;
  flex-direction: column;
}

.tnav-flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Positioning utilities */
.tnav-fixed-full {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.tnav-absolute-full {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.tnav-absolute-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* List reset utility */
.tnav-list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Button reset utilities */
.tnav-btn-reset {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
  color: inherit;
}

.tnav-btn-interactive {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--tnav-space-2);
  border-radius: var(--tnav-radius-base);
  transition: background-color var(--tnav-duration-fast) var(--tnav-ease-out);
}

/* Grid utilities */
.tnav-grid-2 { grid-template-columns: repeat(2, 1fr); }
.tnav-grid-3 { grid-template-columns: repeat(3, 1fr); }
.tnav-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Spacing utilities */
.tnav-mx-auto { 
  margin-left: auto; 
  margin-right: auto; 
}

/* Transition utilities */
.tnav-transition-fast {
  transition: all var(--tnav-duration-fast) var(--tnav-ease-out);
}

.tnav-transition-bg {
  transition: background-color var(--tnav-duration-fast) var(--tnav-ease-out);
}

.tnav-transition-color {
  transition: color 0.2s ease;
}

/* Width utilities */
.tnav-w-full { width: 100%; }

/* =============================================================================
   COMPONENT STYLES
   ============================================================================= */

/* Screen reader only utility */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
  height: 1px;
  width: 1px;
  overflow: hidden;
  word-wrap: normal;
}

/* Focus management */
.tnav a:focus-visible,
.tnav button:focus-visible {
  outline: var(--tnav-focus-ring-width) solid var(--tnav-focus-ring-color);
  outline-offset: var(--tnav-focus-ring-offset);
  border-radius: var(--tnav-radius-sm);
}

/* Navigation container */
.tnav {
  font-family: var(--tnav-font-family-primary);
  font-size: var(--tnav-font-size-sm);
  line-height: var(--tnav-line-height-normal);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1001;
  transform: translateY(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* All nav and panel positioning is now handled dynamically via JavaScript
   which sets --tnav-current-banner-offset and --tnav-current-admin-offset */

/* Prevent fixed header from covering page content - let JS calculate actual height */
body:has(.tnav) main,
body:has(.tnav) #main,
body:has(.tnav) .main-content,
body:has(.tnav) #content {
  padding-top: 0.5rem;
  /*padding-top: var(--tnav-calculated-height, var(--tnav-header-min-height));*/
}

/* Prevent fixed nav from covering Fusion page title bars */
body:has(.tnav) #boxed-wrapper {
  margin-top: var(--tnav-inner-height, var(--tnav-header-min-height));
}

body:has(.tnav) .avada-page-titlebar-wrapper {
  margin-top: var(--tnav-calculated-height, var(--tnav-header-min-height));
}

/* Fallback for browsers that don't support :has() */
body.tnav-active main,
body.tnav-active #main,
body.tnav-active .main-content,
body.tnav-active #content {
  /*padding-top: var(--tnav-calculated-height, var(--tnav-header-min-height));*/
  padding-top: 0.5rem;
}

body.tnav-active #boxed-wrapper {
  margin-top: var(--tnav-inner-height, var(--tnav-header-min-height));
}

body.tnav-active .avada-page-titlebar-wrapper {
  margin-top: var(--tnav-calculated-height, var(--tnav-header-min-height));
}

/* Blur backdrop overlay when panels are active - Modern blur effect (desktop only) */
@media (min-width: 900px) {
  body.tnav-panel--is-open::after,
  body.tnav-search--is-open::after {
    content: '';
    position: fixed;
    top: var(--tnav-nav-bottom, 88px);
    left: 0;
    width: 100%;
    height: calc(100% - var(--tnav-nav-bottom, 88px));
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    pointer-events: none;
    opacity: .3;
    transition: opacity var(--tnav-duration-slow) var(--tnav-ease-smooth);
  }

  body.tnav-panel--is-open.tnav-panel--is-visible::after,
  body.tnav-search--is-open.tnav-search--is-visible::after {
    opacity: 1;
  }
}


/* Mobile: Use calculated height or fallback to minimum */
@media (max-width: 899px) {
  body:has(.tnav) main,
  body:has(.tnav) #main,
  body:has(.tnav) .main-content,
  body:has(.tnav) #content {
    /*padding-top: var(--tnav-calculated-height-mobile, var(--tnav-header-min-height-mobile));*/
    padding-top: var(--tnav-header-min-height);
  }
  
  body.tnav-active main,
  body.tnav-active #main,
  body.tnav-active .main-content,
  body.tnav-active #content {
    /*padding-top: var(--tnav-calculated-height-mobile, var(--tnav-header-min-height-mobile));*/
    padding-top: var(--tnav-header-min-height);
  }
}

/* Hide navbar on scroll down */
.tnav--hidden {
  transform: translateY(-200%);
}


/* Menu items with children */
.tnav__item--has-children {
  position: relative;
}

/* Main navigation bar */
.tnav__bar {
  background-color: var(--tnav-color-background);
  color: var(--tnav-color-text);
  min-height: var(--tnav-header-min-height);
  padding: 1rem;
  position: relative;
  width: 100%;
  /*border-bottom: 1px solid var(--tnav-color-border-light);*/
}

/* Hide border on mobile */
@media (max-width: 768px) {
  .tnav__bar {
    border-bottom: none;
  }
}

/* Remove border when mega menu is open */
.tnav__item--has-children:hover ~ * .tnav__bar,
.tnav__item--has-children:focus-within ~ * .tnav__bar,
.tnav__item.tnav-panel-open ~ * .tnav__bar,
.tnav:has(.tnav__item--has-children:hover) .tnav__bar,
.tnav:has(.tnav__item.tnav-panel-open) .tnav__bar {
  border-bottom: none;
}

.tnav__bar-inner {
  max-width: var(--site_width, 1800px); /* Site width with fallback */
  padding: 0 var(--tnav-space-4);
  height: 100%;
}

/* Logo section */
.tnav__logo-section {
  flex: 0 0 auto;
  }

/* Logo uses .tnav-flex-center utility in HTML */

.tnav__logo img,
.tnav__logo-img {
  height: 2rem;
  width: auto;
  max-width: none;
}

/* Ensure SVG logos display properly */
.tnav__logo svg,
.tnav__logo-img[src$=".svg"] {
  height: 3.5rem;
  width: auto;
  fill: currentColor;
}

.tnav__logo-link {
  color: #171a20;
  text-decoration: none;
  font-weight: var(--tnav-font-weight-bold);
  font-size: var(--tnav-font-size-lg);
  transition: opacity var(--tnav-duration-fast) var(--tnav-ease-out);
}

.tnav__logo-link:hover {
  opacity: 0.8;
}

/* Main menu container */
.tnav__main-menu {
  flex: 1 1 auto;
  justify-content: center;
}

/* Menu list */
.tnav__menu {
  
}

/* Menu items */
.tnav__item {
  position: relative;
}

/* Remove dropdown arrows - Modern style has no arrows */
.tnav__item--has-children > .tnav__link::after {
  display: none;
}

/* Menu links - Modern navigation */
.tnav__link {
  color: var(--tnav-color-text);
  text-decoration: none;
  padding: var(--tnav-space-4) var(--tnav-space-5); /* Increased padding: 16px 20px */
  border-radius: var(--tnav-radius-base);
  font-weight: var(--tnav-font-weight-medium);
  font-size: var(--tnav-font-size-base); /* Explicit font size */
  transition: all var(--tnav-duration-fast) var(--tnav-ease-out);
  white-space: nowrap;
  background-color: transparent;
  position: relative;
  display: inline-block; /* Fix for proper background sizing */
}

/* Reset button styles for parent items */
.tnav__link--button {
  border: none;
  margin: 0;
  font-family: inherit;
  cursor: pointer;
  outline-offset: 2px;
}

.tnav__link--button:focus-visible {
  outline: 2px solid var(--tnav-color-primary);
}

.tnav__link:hover {
  background-color: var(--tnav-color-background-secondary);
  text-decoration: none;
  color: var(--tnav-color-primary);
}

.tnav__item.tnav-panel-open > .tnav__link,
.tnav__item--has-children:hover > .tnav__link,
.tnav__item--has-children:has(.tnav__panel:hover) > .tnav__link,
.tnav__link.tnav-trigger-hovered {
  background-color: var(--tnav-color-background-secondary);
  color: var(--tnav-color-primary);
}

.tnav__link--cta {
  background-color: transparent;
  border: 1px solid var(--tnav-color-text-inverse);
  margin-left: var(--tnav-space-2);
}

.tnav__link--cta:hover {
  background-color: var(--tnav-color-text-inverse);
  color: var(--tnav-color-primary);
}

/* Link content structure */
.tnav__link-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

/* Featured image support */
.tnav__link-image-wrap {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  margin-bottom: var(--tnav-space-2);
  border-radius: var(--tnav-radius-md);
  overflow: hidden;
  position: relative;
}

.tnav__link-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--tnav-duration-fast) var(--tnav-ease-out);
}

.tnav__link:hover .tnav__link-image {
  transform: scale(1.02);
}

.tnav__link-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-wrap: auto;
  box-sizing: border-box;
}

/* Override for panel context to center align text */
.tnav__panel .tnav__link-text {
  align-items: center;
  text-align: center;
}

.tnav__link-title {
  font-weight: var(--tnav-font-weight-bold);
}

.tnav__link-subtitle {
  font-size: var(--tnav-font-size-xs);
  opacity: 0.8;
  margin-top: var(--tnav-space-1);
}

.tnav__link-badge {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.2);
  color: var(--tnav-color-text-inverse);
  font-size: var(--tnav-font-size-xs);
  font-weight: var(--tnav-font-weight-bold);
  padding: var(--tnav-space-1) var(--tnav-space-2);
  border-radius: var(--tnav-radius-full);
  margin-left: var(--tnav-space-2);
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

/* Mega panels - Fixed position approach: fixed position, height animation */
.tnav__panel {
  position: fixed;
  top: var(--tnav-calculated-height, var(--tnav-header-min-height));
  left: 0;
  width: 100%;
  height: 0;
  max-height: calc(100vh - var(--tnav-calculated-height, var(--tnav-header-min-height)) - var(--tnav-current-banner-offset, 0px) - var(--tnav-current-admin-offset, 0px));
  background-color: var(--tnav-color-background);
  color: var(--tnav-color-text);
  opacity: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 2.5rem;
  transition: height var(--tnav-duration-slow) var(--tnav-ease-smooth),
              opacity var(--tnav-duration-base) var(--tnav-ease-smooth);
  z-index: 1000;
  /*box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);*/
  pointer-events: none;
}

/* Show panel when any section is active - Single panel approach */
.tnav__panel[data-tnav-panel-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

/* Panel content sections - Single panel approach */
.tnav__panel-section {
  display: none;
}

.tnav__panel-section[aria-hidden="false"] {
  display: block;
}

/* Mobile panel sections override with higher specificity */
@media (max-width: 899px) {
  /* Remove desktop padding on mobile panels */
  .tnav__mobile-panel .tnav__panel {
    padding-bottom: 0;
  }
  
  .tnav__mobile-panel .tnav__panel .tnav__panel-section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background: #ffffff;
    margin: 0;
    padding: 0;
    z-index: 1300;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.5, 0, 0, 0.75);
    pointer-events: auto;
  }

  .tnav__mobile-panel .tnav__panel .tnav__panel-section[aria-hidden="true"] {
    display: flex;
    transform: translateX(100%);
    pointer-events: none;
  }

  .tnav__mobile-panel .tnav__panel .tnav__panel-section[aria-hidden="false"] {
    display: flex;
    transform: translateX(0);
    pointer-events: auto;
  }
}

/* Remove legacy hover states that could conflict with Single panel approach */

/* Full screen overlay background */
.tnav__panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--tnav-color-background);
  z-index: -1;
}

.tnav__panel-inner {
  max-width: var(--site_width, 1200px);
  margin: 0 auto;
  padding: 1rem 2rem 3rem;
}

/* Reduce padding on mobile */
@media (max-width: 768px) {
  .tnav__panel-inner {
    padding: 1rem;
  }
}

/* Panel content wrapper - styles handled by layout utilities */

/* Menu grid in panels - TL style */
.tnav__menu-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 1800px;
  margin: 0 auto;
  align-items: stretch;
  grid-auto-rows: max-content;
}

/* Contact column containers - each becomes a grid column automatically */
.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-column {
  display: flex;
  flex-direction: column;
  align-items: start;
}

/* Contact column lists - simple vertical list */
.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-column-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}
/* Make grid items compact - override default heights */
.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-grid .tnav__item {
  margin: 0;
  padding: 0;
}

.tnav__panel.tnav__panel--contact .tnav__contact-grid .tnav__item .tnav__link {
  min-height: auto;
  height: auto;
  padding: 4px 0;
  margin: 0;
  display: block;
  background: none;
  box-shadow: none;
  border-radius: 0;
  text-decoration: none;
  color: #1f2937;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}

.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-grid .tnav__item .tnav__link:hover {
  color: #1f2937;
  background: none;
}

.tnav__item--layout-contact-style .tnav__contact-grid > .tnav__item--category {
  display: flex;
  flex-direction: column;
}

/* Make sure each category item (header + submenu) forms a column */
.tnav__item--layout-contact-style .tnav__contact-grid > .tnav__item--has-children {
  display: flex;
  flex-direction: column;
}

/* Remove padding from contact grid link content to prevent indented headers */
.tnav__item--layout-contact-style .tnav__contact-grid .tnav__link-content {
  padding: 0;
}

/* When there are 5-8 items, use 2 rows with 4 columns */
/*.tnav__menu-grid:has(li:nth-child(5)) {
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: row;
}
*/
/* Ensure all grid items stretch to same height */
.tnav__menu-grid > .tnav__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

/* Force 2x4 layout when we have exactly 4 items - removed to keep 4 in one row */

/* Grid layout variations */
.tnav__item--layout-grid-2 .tnav__menu-grid {
  grid-template-columns: repeat(2, 1fr);
}

.tnav__item--layout-grid-3 .tnav__menu-grid {
  grid-template-columns: repeat(3, 1fr);
}

.tnav__item--layout-grid-4 .tnav__menu-grid {
  grid-template-columns: repeat(4, 1fr);
}

.tnav__item--layout-auto .tnav__menu-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* Grid with Sidebar Layout - Fixed selectors to use data-tnav-layout attribute */
.tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] {
  display: block;
}

.tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__panel-main {
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: flex-start;
  justify-content: flex-start;  
}

.tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__panel-content {
  flex: 1;
  width: 100%;
}

.tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__menu-grid {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 20px;
}


.tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__panel-sidebar {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 0;
  margin-top: 0;
}

.tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__sidebar-item {
  margin: 0;
  padding: 0;
}

.tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__sidebar-link {
  display: block;
  color: var(--tnav-color-text);
  text-decoration: none;
  padding: 8px 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  border-bottom: none;
  transition: color 0.2s ease;
}

.tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__sidebar-link:hover {
  color: var(--tnav-color-primary);
  text-decoration: none;

}
@media (max-width:1000px) {

  .tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__panel-sidebar {
    flex: unset;
  }

  .tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__menu-grid {
  display: grid;
  gap: 20px;
}

}

/* Mobile layout: Stack sidebar below content */
@media (max-width: 767px) {
  .tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__panel-main {
    flex-direction: column;
    gap: 0;
  }

  .tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__panel-sidebar {
    flex: none;
    margin-top: 24px;
    width: 100%;
  }

  .tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__sidebar-menu {
    display: grid;
  }

  .tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__sidebar-title {
    font-weight: 300;
    font-size: 14px;
    color: #333333;
  }

  .tnav__panel-inner[data-tnav-layout="grid-with-sidebar"] .tnav__sidebar-link {
    font-size: 16px;
    font-weight: 600;
  }
}

/* Contact Style Layout - Main CSS Grid wrapper */
.tnav__panel-inner[data-tnav-layout="contact-style"] {
  display: grid;
  grid-template-columns: 27% 1fr;
  gap: 40px;
  overflow-y: auto;
  align-items: start;
  width: 100%;
}

/* Contact info section - first column */
.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__panel-contact-info {
  grid-column: 1;
}

/* Panel main - second column containing the 3-column menu grid */
.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__panel-main {
  grid-column: 2;
}

/* Panel content - creates 3-column grid for menu columns */
.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__panel-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}


/* Mobile responsive: Stack everything vertically */
@media (max-width: 768px) {
  .tnav__panel-inner[data-tnav-layout="contact-style"] {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 2rem;
  }
  
  .tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__panel-contact-info {
    grid-column: 1;
  }
  
  .tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__panel-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Fix mobile scroll area - remove nested overflow for mobile panels */
@media (max-width: 899px) {
  .tnav__mobile-panel .tnav__panel-inner[data-tnav-layout="contact-style"] {
    overflow-y: scroll;
    margin-bottom: 3rem;
    padding-bottom: 10rem;
  }
}

/* Override Avada sticky z-index to be below TLC nav search */
.fusion-sticky-container.fusion-container-stuck {
  --awb-z-index: 9998 !important;
  z-index: 9998 !important;
}


/* Contact section typography - override theme defaults */
.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-heading {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.5rem; /* 24px */
  font-weight: 600;
  color: var(--tnav-color-text);
  margin: 0 0 1rem 0; /* 16px */
  line-height: 1.2;
}

.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-description {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem; /* 16px */
  color: var(--tnav-color-text);
  line-height: 1.5;
  margin: 0 0 1.5rem 0; /* 24px */
}

.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-description p {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  margin: 0 0 0.5rem 0; /* 8px */
}

.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-details {
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 0.875rem; /* 14px */
  color: var(--tnav-color-text);
  line-height: 1.6;
}

.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-details p {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  margin: 0 0 0.5rem 0; /* 8px */
}





/* Category header links - these are the column headers */
.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-column-list .tnav__item--category > .tnav__link {
  background: none;
  border-radius: 0;
  min-height: auto;
  box-shadow: none;
  border: none;
  margin-bottom: 16px;
  text-decoration: none;
  color: inherit;
  pointer-events: none;
  display: block;
}

.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-column-list .tnav__item--category > .tnav__link:hover {
  background: none;
  color: inherit;
}

/* Category headers - match target screenshot exactly */
/* Category header titles - match target screenshot */
.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-column-list .tnav__item--category .tnav__link-title {
  font-size: 14px;
  font-weight: 600;
  color: #6b7280;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  text-align: left;
  word-wrap: normal;
  overflow-wrap: normal;
}

/* Regular menu items (non-category) - match target screenshot */
.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-column-list .tnav__item--default > .tnav__link {
  background: none;
  padding: 6px 0;
  border-radius: 0;
  min-height: auto;
  box-shadow: none;
  border: none;
  margin: 0;
  text-decoration: none;
  color: var(--tnav-color-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  display: block;
  transition: color 0.2s ease;
}

.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-column-list .tnav__item--default > .tnav__link:hover {
  color: var(--tnav-color-primary);
  background: none;
  text-decoration: none;
  transform: none;
  box-shadow: none;
}

.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-column-list .tnav__item--default .tnav__link:hover .tnav__link-title {
  color: var(--tnav-color-primary-hover);
}

/* Link content styling for menu items */
.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-column-list .tnav__item--default .tnav__link-content {
  padding: 0;
  text-align: left;
  align-items: flex-start;
}

.tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-column-list .tnav__item--default .tnav__link-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--tnav-color-text);
  text-align: left;
  margin: 0;
  padding: 0;
  line-height: 1.3;
}

/* Tablet responsive: Adjust layout at 1000px */
@media (max-width: 1000px) {
  .tnav__panel-inner[data-tnav-layout="contact-style"] {
    grid-template-columns: 35% 1fr;
    gap: 20px;
  }

  .tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__panel-content {
    gap: 0;
  }
  
  .tnav__panel-inner[data-tnav-layout="contact-style"] .tnav__contact-column-list .tnav__item--default .tnav__link-title {
    font-size: 14px;
  }
}


/* Blog Style Layout - Fixed selectors to use data-tnav-layout attribute */
.tnav__panel-inner[data-tnav-layout="blog-style"] {
  display: grid;
  grid-template-columns: 27% 1fr;
  grid-gap: 40px;
  align-items: flex-start;
  margin: 0 auto;
}


.tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__panel-blog-info {
  flex: 0 0 40%;
  padding-right: 20px;
}

.tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__blog-heading {
  font-size: 1.45em;
  font-weight: 600;
  color: var(--tnav-color-text);
  margin: 0 0 16px 0;
  line-height: 1.8;
}

.tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__blog-description {
  font-size: 16px;
  color: var(--tnav-color-text);
  line-height: 1.5;
  margin: 0;
}

.tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__panel-main {
  flex: 1;
}

/* Blog grid layout - 3 horizontal cards */
.tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__menu-grid {
  display: flex;
  flex-direction: row;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__menu-grid > .tnav__item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Blog card styling */
.tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__menu-grid .tnav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: inherit;
  background: none;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__menu-grid .tnav__link:hover {
  transform: none;
  background: none;
}

.tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__menu-grid .tnav__link-image-wrap {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--tnav-color-background-secondary);
  position: relative;
}

.tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__menu-grid .tnav__link-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
}

.tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__menu-grid .tnav__link-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--tnav-color-text);
  text-align: center;
  margin: 0;
}

@media (min-width:768px) and (max-width:900px){
  .tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__panel-blog-info {
  flex: none;
  padding-right: 20px;
}
.tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__panel-main {
  width: 100%;
}
  
}
@media (max-width:766px) {

  .tnav__panel-inner[data-tnav-layout="blog-style"] {
    padding-top: 2rem;
  }

  .tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__panel-blog-info {
    flex: none;
}
  .tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .tnav__panel-inner[data-tnav-layout="blog-style"] .tnav__panel-main {
    width: 100%;
  }
}





/* Submenu items in panels - TL Card style */
.tnav__panel .tnav__item {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}

.tnav__panel .tnav__link {
  color: var(--tnav-color-text);
  padding: 0;
  border-radius: 12px;
  border: none;
  background-color: var(--tnav-color-background);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  transition: all 0.3s ease;
  height: 100%;
  /*min-height: 280px;*/
  text-decoration: none;
  box-shadow: none;
  overflow: hidden;
  flex-grow: 1;
  min-width: 0;
  width: 100%;
}

.tnav__panel .tnav__link:hover {
  background-color: var(--tnav-color-background);
  text-decoration: none;
  transform: none;
  box-shadow: none;
}

/* Featured image in submenu panels - TL style */
.tnav__panel .tnav__link-image-wrap {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background-color: var(--tnav-color-background-secondary);
  position: relative;
}

.tnav__panel .tnav__link-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.3s ease;
  position: absolute;
  top: 0;
  left: 0;
}

.tnav__panel .tnav__link:hover .tnav__link-image {
  transform: scale(1.05);
}

/* Submenu text styling - TL style */
.tnav__panel .tnav__link-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  flex-grow: 1;
  justify-content: flex-start;
  min-height: 0;
  overflow: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

.tnav__panel .tnav__link-title {
  font-weight: 700;
  font-size: 1em;
  margin-bottom: 0;
  color: var(--tnav-color-text);
  line-height: 1;
  text-align: center;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.tnav__panel .tnav__link-subtitle {
  font-size: 14px;
  color: var(--tnav-color-text-secondary);
  line-height: 1.4;
  margin: 8px 0 0 0;
}

/* Person expertise styling - regular text, not tags */
.tnav__person-expertise {
  font-size: 14px;
  color: var(--tnav-color-text-secondary);
  line-height: 1.4;
  margin: 8px 0 0 0;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  white-space: normal;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Person cards */
.tnav__person {
  display: flex;
  align-items: flex-start;
  gap: var(--tnav-space-3);
  padding: var(--tnav-space-4);
  border-radius: var(--tnav-radius-lg);
  transition: all var(--tnav-duration-fast) var(--tnav-ease-out);
}

.tnav__person:hover {
  background-color: var(--tnav-color-background-secondary);
}

.tnav__person-avatar-wrap {
  flex: 0 0 auto;
}

.tnav__person-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: var(--tnav-radius-full);
  object-fit: cover;
}

.tnav__person-info {
  flex: 1 1 auto;
  min-width: 0;
}

.tnav__person-name {
  font-weight: var(--tnav-font-weight-semibold);
  font-size: var(--tnav-font-size-base);
  margin-bottom: var(--tnav-space-1);
}

.tnav__person-role {
  color: var(--tnav-color-text-secondary);
  font-size: var(--tnav-font-size-sm);
  margin-bottom: var(--tnav-space-2);
}

.tnav__person-expertise {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tnav-space-1);
}

.tnav__person-skill {
  display: inline-block;
  background-color: var(--tnav-color-background-tertiary);
  color: var(--tnav-color-text-secondary);
  font-size: var(--tnav-font-size-xs);
  padding: var(--tnav-space-1) var(--tnav-space-2);
  border-radius: var(--tnav-radius-full);
}

/* Utilities section */
.tnav__utilities {
  display: flex;
  align-items: center;
  gap: var(--tnav-space-2);
  flex: 0 0 auto;
}

/* Search functionality - Apple.com style */
.tnav__search {
  position: relative;
}

.tnav__search-toggle {
  color: var(--tnav-color-text); /* Fixed: was text-inverse (white), now dark */
}

.tnav__search-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.tnav__search-form-wrap {
  position: fixed;
  top: 4.8rem;
  left: 0;
  right: 0;
  /*bottom: 0;*/
  width: 100%;
  /*height: calc(60vh - var(--tnav-calculated-height, var(--tnav-header-min-height)));*/
  background-color: #ffffff;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--tnav-duration-base) var(--tnav-ease-out), visibility var(--tnav-duration-base) var(--tnav-ease-out);
  z-index: 1300;
}

.tnav__search.tnav-search-open .tnav__search-form-wrap {
  opacity: 1;
  visibility: visible;
}

.tnav__search-form {
  max-width: var(--site_width, 800px);
  margin: 1em auto;
  padding: 0 var(--tnav-space-6);
  position: relative;
}

.tnav .tnav__search-form .tnav__search-input,
.tnav__search-form input.tnav__search-input,
input.tnav__search-input[type="search"] {
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #d1d1d6;
  padding: var(--tnav-space-4) 0 var(--tnav-space-4) 3rem;
  font-size: 3rem;
  font-weight: 300;
  line-height: 1.2;
  font-family: inherit;
  color: #1d1d1f;
  background-color: transparent;
  outline: none;
}

.tnav .tnav__search-form .tnav__search-input::placeholder,
.tnav__search-form input.tnav__search-input::placeholder,
input.tnav__search-input[type="search"]::placeholder {
  color: #86868b;
}

.tnav .tnav__search-form .tnav__search-input:focus,
.tnav__search-form input.tnav__search-input:focus,
input.tnav__search-input[type="search"]:focus {
  border-bottom-color: #0071e3;
}

.tnav__search-form::before {
  content: '';
  position: absolute;
  left: var(--tnav-space-6);
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.tnav__search-submit {
  display: none;
}

.tnav__search-close {
  position: absolute;
  top: var(--tnav-space-6);
  right: var(--tnav-space-6);
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #1d1d1f;
  cursor: pointer;
  padding: var(--tnav-space-2);
  border-radius: var(--tnav-radius-full);
  transition: background-color var(--tnav-duration-fast) var(--tnav-ease-out);
  font-size: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
}

.tnav__search-close:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Mobile toggle */
.tnav__mobile-toggle {
  display: none;
}

.tnav__mobile-toggle-btn {
  color: var(--tnav-color-text);
  background-color: var(--tnav-color-button-background);
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  padding: .65em 1.5em;
  margin-right: .85em;
}

.tnav__mobile-toggle-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.tnav__mobile-toggle-text {
  display: block;
}

/* Mobile overlay - unified structure */
.tnav__mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1300;
  opacity: 0;
  visibility: hidden;
  transition: all var(--tnav-duration-base) var(--tnav-ease-out);
}

.tnav__mobile-overlay.tnav-mobile-open {
  opacity: 1;
  visibility: visible;
}

.tnav__mobile-overlay-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*background-color: var(--tnav-color-background-overlay);*/
  cursor: pointer;
}

.tnav__mobile-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--tnav-color-background);
  color: var(--tnav-color-text);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal scroll artifacts */
  /* Remove transform - dialog handles positioning */
  display: flex;
  flex-direction: column;
}

/* Remove obsolete mobile overlay transform rules */

.tnav__mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--tnav-space-4);
  /*border-bottom: 1px solid var(--tnav-color-border-light);*/
}

.tnav__mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--tnav-color-text);
  cursor: pointer;
  padding: var(--tnav-space-2);
  border-radius: var(--tnav-radius-base);
  transition: background-color var(--tnav-duration-fast) var(--tnav-ease-out);
}

.tnav__mobile-close:hover {
  background-color: var(--tnav-color-background-secondary);
}

.tnav__mobile-content {
  padding: var(--tnav-space-4);
}

/* Mobile search */
.tnav__mobile-search {
  margin-bottom: var(--tnav-space-6);
}

.tnav__mobile-search-form {
  display: flex;
  align-items: center;
  gap: var(--tnav-space-2);
}

.tnav__mobile-search-input {
  flex: 1 1 auto;
  border: 1px solid var(--tnav-color-border);
  border-radius: var(--tnav-radius-md);
  padding: var(--tnav-space-3) var(--tnav-space-4);
  font-size: 16px; /* Prevent iOS zoom */
  font-family: inherit;
  color: var(--tnav-color-text);
  background-color: var(--tnav-color-background);
}

.tnav__mobile-search-input:focus {
  outline: none;
  border-color: var(--tnav-color-primary);
  box-shadow: 0 0 0 1px var(--tnav-color-primary);
}

.tnav__mobile-search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--tnav-color-primary);
  border: none;
  color: var(--tnav-color-text-inverse);
  cursor: pointer;
  padding: var(--tnav-space-3);
  border-radius: var(--tnav-radius-md);
  transition: background-color var(--tnav-duration-fast) var(--tnav-ease-out);
}

.tnav__mobile-search-submit:hover {
  background-color: var(--tnav-color-primary-hover);
}

/* Mobile navigation uses .tnav-list-reset utility in HTML */

/* Hide mobile arrows on desktop */
.tnav__mobile-arrow {
  display: none;
}

/* Mobile menu item styling to match Modern design */
@media (max-width: 899px) {
  .tnav__menu--mobile .tnav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    /*border-bottom: 1px solid #e5e7eb;*/
    background: none;
    text-align: left;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
  }
  
  .tnav__mobile-item-text {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
    margin: 0; 
  }
  
  .tnav__mobile-arrow {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%236b7280' d='M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}
  
  
  /* Mobile search item styling */
  .tnav__mobile-search-item {
    /* Remove border for consistency with other menu items */
  }
  
  .tnav__mobile-search-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    background: none;
    border: none;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    font-family: inherit;
    cursor: pointer;
  }
  
  .tnav__mobile-item-text {
    flex: 1;
    text-align: left;
  }
  
  .tnav__mobile-item-icon {
    width: 24px;
    height: 24px;
    color: #6b7280;
  }
  
  .tnav__mobile-item-icon svg {
    width: 24px;
    height: 24px;
  }

  /* Mobile contact info section */
  .tnav__mobile-contact {
    padding: 0 0.5rem;
      }

  .tnav__mobile-contact-text {
    font-size: 14px;
    line-height: 1.5;
    color: #2d2d72;
    margin-bottom: 1rem;
  }

  .tnav__mobile-contact-text p {
    margin: 0 0 0.5rem 0;
  }

  .tnav__mobile-contact-text p:last-child {
    margin-bottom: 0;
  }

  .tnav__mobile-contact-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .tnav__mobile-contact-phone {
    font-size: 18px;
    font-weight: 600;
    color: #2d2d72;
    text-align: left;
    flex: 1;
  }

  .tnav__mobile-contact-btn {
    display: inline-block;
    padding: 10px 24px;
    background-color: var(--tnav-color-button-background);
    color: var(--tnav-color-text);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    transition: background-color 0.2s ease;
    min-width: 140px;
  }

 /* .tnav__mobile-contact-btn:hover {
    background-color: #2563eb;
    color: #ffffff;
    text-decoration: none;
  }
*/

/* Hide child menus by default - Modern style */
.tnav__mobile-menu .sub-menu {
  display: none;
  padding-left: var(--tnav-space-4);
}

/* Show child menus when parent is expanded */
.tnav__mobile-item--expanded .sub-menu {
  display: block;
}

/* Add expand indicator to parent items */
.tnav__mobile-item.menu-item-has-children > .tnav__mobile-link {
  position: relative;
  padding-right: calc(var(--tnav-space-4) + 24px);
}

.tnav__mobile-item.menu-item-has-children > .tnav__mobile-link::after {
  content: '';
  position: absolute;
  right: var(--tnav-space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='currentColor' d='M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform var(--tnav-duration-fast) var(--tnav-ease-out);
}

.tnav__mobile-item--expanded > .tnav__mobile-link::after {
  transform: translateY(-50%) rotate(90deg);
}

.tnav__mobile-item {
  border-bottom: 1px solid var(--tnav-color-border-light);
}

.tnav__mobile-item:last-child {
  border-bottom: none;
}

.tnav__mobile-link {
  display: block;
  color: var(--tnav-color-text);
  text-decoration: none;
  padding: var(--tnav-space-4);
  font-weight: var(--tnav-font-weight-medium);
  transition: all var(--tnav-duration-fast) var(--tnav-ease-out);
}

.tnav__mobile-link:hover {
  background-color: var(--tnav-color-background-secondary);
  color: var(--tnav-color-primary);
  text-decoration: none;
}

/* Mobile mega menu - Single panel approach within mobile dialog */
@media (max-width: 899px) {
  /* Mobile panel container - non-blocking, only sections overlay */
  .tnav__mobile-panel .tnav__panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 0;
    background: transparent;
    z-index: 9999;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    pointer-events: none;
    box-shadow: none;
  }



.tnav__mobile-back,
.tnav__mobile-close {
  background: none;
  border: none;
  padding: var(--tnav-space-2);
  color: var(--tnav-color-text);
  cursor: pointer;
  border-radius: var(--tnav-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--tnav-duration-fast) var(--tnav-ease-out);
}

.tnav__mobile-back:hover,
.tnav__mobile-close:hover {
  background-color: var(--tnav-color-background-secondary);
}

.tnav__mobile-title,
.tnav__mobile-title-link {
  font-size: var(--tnav-font-size-lg);
  font-weight: var(--tnav-font-weight-semibold);
  color: var(--tnav-color-text);
  margin: 0;
  text-align: center;
  flex: 1;
  text-decoration: none;
}

.tnav__mobile-title-link:hover {
  color: var(--tnav-color-primary);
  text-decoration: none;
}

  /* Mobile panel sections handled by higher specificity rules above */

  /* Panel content area - Shared panel approach */
  .tnav__mobile-panel .tnav__panel-inner {
    /*height: 100%;*/
    width: 100%;
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    background: #ffffff;
    flex: 1;
    padding: 1.5rem 1.5rem 6rem 1.5rem;
    box-sizing: border-box;
  }

  .tnav__mobile-panel .tnav__panel-content {
    flex: 1;
    padding: .25rem;
    background: #ffffff;
    display: flex;
    flex-direction: column;
  }

  /* 2x4 grid layout exactly like screenshot - Shared panel structure */
  .tnav__mobile-panel .tnav__menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    flex: 1;
    align-content: start;
    grid-auto-rows: max-content;
  }

  .tnav__mobile-panel .tnav__menu-grid .tnav__item {
    margin: 0;
  }

  .tnav__mobile-panel .tnav__menu-grid .tnav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #374151;
    background: #ffffff;
    border: none;
    min-height: auto;
    justify-content: center;
    transition: all 0.2s ease;
  }

  .tnav__mobile-panel .tnav__menu-grid .tnav__link:hover {
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);*/
    transform: none;
  }

  .tnav__mobile-panel .tnav__link-image-wrap {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
    flex-shrink: 0;
    position: relative;
  }

  .tnav__mobile-panel .tnav__link-content {
    padding: 0;
    width: 100%;
    flex: 1;
  }

  .tnav__mobile-panel .tnav__link-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .tnav__mobile-panel .tnav__link-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #2D2D72;
    text-align: center;
    line-height: 1.4;
    margin: 0;
  }

  /* Bottom links section exactly like screenshot - Shared panel structure */
  .tnav__mobile-panel .tnav__panel-sidebar {
    background: #ffffff;
    padding: 20px;
    margin-top: 1rem;
  }

  .tnav__mobile-panel .tnav__sidebar-menu {
    display: grid;
    gap: 16px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .tnav__mobile-panel .tnav__sidebar-item {
    margin: 0;
  }

  .tnav__mobile-panel .tnav__sidebar-link {
    display: block;
    padding: 8px 0;
    color: #6b7280;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    transition: color 0.2s ease;
  }

  .tnav__mobile-panel .tnav__sidebar-link:hover {
    color: #374151;
    text-decoration: none;
  }

  /* Hide other mobile menu items when panel is open */
  .tnav__mobile-menu .tnav-panel-open ~ .tnav__mobile-item {
    display: none;
  }
}

/* Icons */
.tnav__icon {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
}

/* Responsive design */
/* Mobile only: Show hamburger menu at 900px */
@media (max-width: 899px) {
  .tnav__main-menu {
    display: none;
  }
  
  .tnav__search {
    display: none;
  }
  
  .tnav__mobile-toggle {
    display: block;
  }
  
  .tnav__bar {
    min-height: var(--tnav-header-min-height-mobile);
  }
}

/* Mobile adjustments at 900px */
@media (max-width: 899px) {
  .tnav__bar-inner {
    padding: 0 var(--tnav-space-3);
  }
  
  .tnav__logo img,
  .tnav__logo-img {
    height: 1.5rem;
  }
  
  .tnav__logo svg,
  .tnav__logo-img[src$=".svg"] {
    height: 3.5rem;
  }
  
  .tnav__mobile-header {
    padding: var(--tnav-space-3);
  }
  
  .tnav__mobile-content {
    padding: var(--tnav-space-3);
  }
}

/* =============================================================================
   MODERN MOBILE DIALOG SYSTEM
   ============================================================================= */

/* Mobile panel dialog element */
.tnav__mobile-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden; /* Critical: prevent any horizontal scrolling artifacts */
  background: white;
  border: none;
  z-index: 1200;
  /* Hide by default */
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.5, 0, 0, 0.75);
}

/* When dialog is open (Dialog behavior) */
.tnav__mobile-panel[open] {
  transform: translateY(0);
}

/* Mobile content wrapper */
.tnav__mobile-panel .tnav__mobile-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1em;
  overflow-y: auto;
}

/* Mobile header with logo and close */
.tnav__mobile-panel .tnav__mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--tnav-space-5);
  /*padding-bottom: var(--tnav-space-4);*/
  /*border-bottom: 1px solid var(--tnav-color-border);*/
  padding:0; 
}

/* Mobile close button */
.tnav__mobile-panel .tnav__mobile-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  transition: background-color 0.15s ease;
}

.tnav__mobile-panel .tnav__mobile-close:hover {
  background: var(--tnav-color-bg-hover);
}

/* Modernstyle backdrop element */
.tnav-modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  pointer-events: none;
  z-index: 1199;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
}

/* Active backdrop (Standard pattern) */
.tnav-modal-backdrop--active {
  /*background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  pointer-events: auto;*/
}

/* Body state management (Standard pattern) */
.tnav-mobile-menu--is-open,
.tnav-mobile-search--is-open {
  overflow: hidden;
}

/* Scroll prevention using position fixed - no scrollbar hiding */
.tnav--no-scroll {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Scrollbar remains visible but scroll is prevented */
}

/* Mobile navigation styles */
.tnav__mobile-panel .tnav__mobile-nav {
  flex: 1;
  margin-bottom: var(--tnav-space-5);
}

.tnav__mobile-panel .tnav__menu--mobile {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tnav__mobile-panel .tnav__menu--mobile .tnav__item {
  margin-bottom: var(--tnav-space-2);
}

.tnav__mobile-panel .tnav__menu--mobile .tnav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem;
  font-size: var(--tnav-font-size-large);
  color: var(--tnav-color-text);
  text-decoration: none;
  /*border-bottom: 1px solid var(--tnav-color-border);*/
  transition: color 0.15s ease;
}

.tnav__mobile-panel .tnav__menu--mobile .tnav__link:hover {
  color: var(--tnav-color-primary);
}

/* Mobile search section */
.tnav__mobile-panel .tnav__mobile-search {
  margin-bottom: var(--tnav-space-5);
}

.tnav__mobile-panel .tnav__mobile-search-item {
  padding: 0.5rem;
}

.tnav__mobile-panel .tnav__mobile-search-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s ease;
}

.tnav__mobile-panel .tnav__mobile-search-toggle:hover {
  color: var(--tnav-color-primary);
}

/* Mobile search item - styled like other menu items */
.tnav__mobile-search-item {
  /* No borders, consistent with other menu items */
  overflow: hidden; /* Hide sliding elements - CRITICAL: prevents horizontal overflow artifact */
  position: relative;
  /* Add consistent padding like other menu items */
  padding: 0;
}

/* Container for the sliding transformation */
.tnav__mobile-search-inline {
  display: flex;
  align-items: center;
  width: 200%; /* Double width to hold both toggle and form */
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden; /* Prevent this container from causing horizontal scroll */
}

/* Toggle button takes half of the 200% container */
.tnav__mobile-search-inline .tnav__mobile-search-toggle {
  width: 50%; /* Half of the 200% container = 100% of visible area */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--tnav-color-text);
}

/* Ensure search icon is visible */
.tnav__mobile-search-inline .tnav__mobile-search-toggle .tnav__mobile-item-icon {
  display: flex;
  align-items: center;
  color: var(--tnav-color-text-secondary, #6b7280);
}

.tnav__mobile-search-inline .tnav__mobile-search-toggle .tnav__mobile-item-icon .tnav__icon {
  width: 20px;
  height: 20px;
  color: currentColor;
}

/* Initially show toggle button */
.tnav__mobile-search-inline.collapsed {
  transform: translateX(0);
}


/* Slide to show input field */
.tnav__mobile-search-inline.expanded {
  transform: translateX(-47%); /* Move left by half (since container is 200% width) */
}

/* Inline search form (positioned to slide in from right) */
.tnav__mobile-search-form-inline {
  display: flex;
  align-items: center;
  font-size: 16px; /* Avoid apple ADA */
  width: 48%; /* Half of the 200% container = 100% of visible area when expanded */
  padding: 0.5rem 0; /* Remove horizontal padding to use full width */
  gap: 0.5rem;
  flex-shrink: 0;
  visibility: hidden;
}

.tnav__mobile-search-inline.expanded .tnav__mobile-search-form-inline {
  visibility: visible;
}

/* Inline search input - high specificity to prevent iOS zoom */
.tnav__mobile-panel .tnav__mobile-search-form-inline .tnav__mobile-search-input-inline,
input.tnav__mobile-search-input-inline[type="search"],
input.tnav__mobile-search-input-inline[type="text"],
input.tnav__mobile-search-input-inline {
  flex: 1;
  border: 1px solid var(--tnav-color-border);
  border-radius: var(--tnav-radius-base);
  padding: 0.5rem;
  font-size: 16px !important; /* Force 16px to prevent iOS zoom */
  font-family: inherit;
  background: var(--tnav-color-background);
  color: var(--tnav-color-text);
  -webkit-appearance: none; /* Remove iOS search styling */
  appearance: none; /* Remove default search styling */
}

.tnav__mobile-search-input-inline:focus {
  outline: none;
  border-color: var(--tnav-color-primary);
  box-shadow: 0 0 0 1px var(--tnav-color-primary);
}

/* Close button for inline search */
.tnav__mobile-search-close-inline {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  color: var(--tnav-color-text-secondary);
  font-size: 18px;
  line-height: 1;
  transition: color 0.15s ease;
}

.tnav__mobile-search-close-inline:hover {
  color: var(--tnav-color-text);
}


.tnav__mobile-search-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  font-family: inherit;
  padding: 0;
  text-align: left;
  transition: color 0.15s ease;
}

.tnav__mobile-search-toggle:hover {
  color: var(--tnav-color-primary, #3b82f6);
}

.tnav__mobile-item-text {
  flex: 1;
  font-size: 1.125rem;
  font-weight: 700;
}

.tnav__mobile-item-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: var(--tnav-space-2);
}

.tnav__mobile-item-icon .tnav__icon {
  width: 20px;
  height: 20px;
  color: currentColor;
}

/* Mobile search overlay - full screen below header */
.tnav__mobile-search-overlay {
  position: fixed;
  top: var(--tnav-calculated-height-mobile, var(--tnav-header-min-height-mobile));
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100vh - var(--tnav-calculated-height-mobile, var(--tnav-header-min-height-mobile)));
  background-color: #ffffff;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  flex-direction: column;
}

.tnav__mobile-search-overlay--open {
  opacity: 1;
  visibility: visible;
}

.tnav__mobile-search-overlay-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tnav__mobile-search-overlay-form {
  max-width: 800px;
  margin: 60px auto 0;
  padding: 0 var(--tnav-space-6);
  position: relative;
}

.tnav__mobile-search-overlay-input {
  width: 100%;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #d1d1d6;
  padding: var(--tnav-space-4) 0 var(--tnav-space-4) 3rem;
  font-size: 16px; /* Prevent iOS zoom */
  font-weight: 300;
  line-height: 1.2;
  font-family: inherit;
  color: #1d1d1f;
  background-color: transparent;
  outline: none;
}

.tnav__mobile-search-overlay-input::placeholder {
  color: #86868b;
}

.tnav__mobile-search-overlay-input:focus {
  border-bottom-color: #0071e3;
}

.tnav__mobile-search-overlay-form::before {
  content: '';
  position: absolute;
  left: var(--tnav-space-6);
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.tnav__mobile-search-overlay-submit {
  display: none;
}

.tnav__mobile-search-overlay-close {
  position: absolute;
  top: var(--tnav-space-4);
  right: var(--tnav-space-4);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--tnav-space-2);
  color: #6b7280;
  transition: color 0.2s ease;
}

.tnav__mobile-search-overlay-close:hover {
  color: #1f2937;
}

.tnav__mobile-search-overlay-close .tnav__icon {
  width: 24px;
  height: 24px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .tnav__link:focus-visible,
  .tnav button:focus-visible {
    outline-width: 3px;
  }
}

/* Modernstyle responsive mobile panel headers - moved to end for cascade priority */
.tnav__mobile-panel-header {
  display: none; /* Hidden by default on desktop */
  padding: 1rem 1.25rem;
  background: var(--tnav-color-background);
  border-bottom: 1px solid var(--tnav-color-border);
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 60px;
  width: 100%;
  box-sizing: border-box;
}

/* Responsive grid - Responsive breakpoints */
/* Tablet: 900px - 1199px (3 columns) */
@media (max-width: 1100px) and (min-width: 900px) {
  .tnav__menu-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
}

/* Mobile: < 900px (mobile menu - no grid needed since it's list-based) */
@media (max-width: 899px) {
  .tnav__menu-grid {
    width:100%;
    gap: 16px;
  }

}

/* Mobile panel responsive grids */
@media (min-width: 768px) and (max-width: 899px) {
  .tnav__mobile-panel .tnav__menu-grid {
    grid-template-columns: repeat(3, 1fr);
    
  }
  
  .tnav__mobile-panel .tnav__sidebar-menu {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .tnav__mobile-panel .tnav__menu-grid {
    grid-template-columns: repeat(2, 1fr);
  
  }
  
  .tnav__mobile-panel .tnav__sidebar-menu {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* Mobile breakpoint: Show mobile panel headers */
@media (max-width: 899px) {
  .tnav__mobile-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* Modernstyle animations */
@keyframes tnavSlideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Height animation for single panel */

/* Print styles */
@media print {
  .tnav {
    display: none;
  }
}