/* ============================================= */
/*     TNCLD - CUSTOM CSS (HEAD CODE)          */
/*     Tennessee Centers for Laser Dentistry    */
/* ============================================= */
/*     Copy to Webflow: Settings > Custom Code  */
/*              > Head Code                      */
/*     Wrap in <style> tags when transferring   */
/* ============================================= */

/*
 * This file contains custom CSS for the TNCLD website.
 * Add styles here for local development, then transfer
 * to Webflow Custom Code > Head Code when ready.
 *
 * Created: January 16, 2026
 * Last Updated: February 10, 2026
 */

/* ============================================= */
/*     FONT AWESOME 6 PRO — WOFF2 OVERRIDE     */
/* ============================================= */
/*
 * Webflow uploads FA Pro fonts as OTF, which Safari
 * renders poorly (broken ligatures). These @font-face
 * rules override with WOFF2 format served from jsDelivr.
 *
 * Also removes the need for the FA Kit script (which
 * was loading the free version and adding 50KB of bloat).
 */

@font-face {
  font-family: "Font Awesome 6 Pro Solid 900";
  src: url("fonts/Font-Awesome-6-Pro-Solid-900.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Font Awesome 6 Pro 400";
  src: url("fonts/Font-Awesome-6-Pro-Regular-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Font Awesome 6 Pro 300";
  src: url("fonts/Font-Awesome-6-Pro-Light-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Font Awesome 6 Pro 100";
  src: url("fonts/Font-Awesome-6-Pro-Thin-100.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Font Awesome 6 Brands 400";
  src: url("fonts/Font-Awesome-6-Brands-Regular-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Font Awesome 6 Free Solid 900";
  src: url("fonts/Font-Awesome-6-Free-Solid-900.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============================================= */
/*     FONT AWESOME — LIGATURE RENDERING FIX    */
/* ============================================= */
/*
 * Safari doesn't activate OpenType ligatures by default
 * for web fonts. These properties force ligature rendering
 * so FA icon names (e.g., "arrow-up-right") display as glyphs.
 */

.icon-sm,
.icon-md,
.icon-lg,
.icon-xl {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "clig" 1;
}

/* ============================================= */
/*              SMOOTH SCROLL                   */
/* ============================================= */

/* Native CSS smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ============================================= */
/*       TYPOGRAPHY — ORPHAN/WIDOW PREVENTION   */
/* ============================================= */
/*
 * text-wrap: balance — equalizes line lengths in headings
 *   so no line is dramatically shorter than others.
 * text-wrap: pretty — prevents orphan words (single word
 *   alone on the last line) in body text.
 *
 * Progressive enhancement: browsers without support
 * render normally. Supported in Chrome 114+, Firefox 121+,
 * Safari 17.5+.
 */

/* Headings — balanced line lengths */
h1, h2, h3, h4, h5, h6,
[class*="text_heading-"],
[class*="text_label-xxl"],
[class*="text_label-xl"] {
  text-wrap: balance;
}

/* Body text — prevent orphans */
p,
li,
[class*="text_body-"] {
  text-wrap: pretty;
}

/* ============================================= */
/*              UTILITY CLASSES                 */
/* ============================================= */

/* Hide elements (for CMS empty states, etc.) */
.hide {
  display: none !important;
}

/* Screen reader only (accessible hiding) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================= */
/*            CUSTOM OVERRIDES                  */
/* ============================================= */

/* Navigation styles moved to STICKY NAV section below */

/* ============================================= */
/*         NAV DROPDOWN CHEVRON FIX             */
/* ============================================= */
/*
 * Fix: Chevron icon jumps right when dropdown opens
 * Ensure consistent spacing between nav text and chevron
 */

/* Lock the dropdown toggle to use consistent flex layout */
.nav-dropdown-toggle.w-dropdown-toggle {
  display: flex !important;
  align-items: center;
  gap: 4px !important; /* Gap between text and chevron */
}

/* Remove extra padding from nav link text */
.nav-dropdown-toggle .text_label-sm.nav-link {
  white-space: nowrap;
  padding-right: 0 !important; /* Remove 24px padding */
}

/* Keep dropdown icon in fixed position relative to text */
.nav-dropdown-toggle .dropdown-icon {
  position: relative !important;
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important;
  margin-left: 0;
  margin-right: 0;
}

/* Force SVG inside dropdown icon to match container size */
.nav-dropdown-toggle .dropdown-icon svg {
  width: 16px !important;
  height: 16px !important;
}

/* Ensure icon doesn't shift when dropdown is open */
.nav-dropdown-toggle.w--open .dropdown-icon,
.nav_menu-dropdown.w--open .dropdown-icon {
  position: relative !important;
  margin-left: 0;
}


/* ============================================= */
/*         MEGA NAV POSITIONING FIX             */
/* ============================================= */
/*
 * Mega nav should appear as seamless extension of top nav bar
 * - Positioned directly below the nav, no gap
 * - Full-width background, centered content
 * - Does not overlay the nav bar
 */

/* Main nav is the positioning context for mega nav */
/* NOTE: position:fixed (set in sticky nav section) also creates a containing block */

/* All intermediate containers need static positioning */
.navigation.w-nav[data-doc-height="1"] .container-lg,
.navigation.w-nav[data-doc-height="1"] .layout_nav,
.navigation.w-nav[data-doc-height="1"] .col_nav,
.navigation.w-nav[data-doc-height="1"] .nav_menu,
.nav_menu-dropdown {
  position: static !important;
}

/* Mega nav wrapper - full viewport width, positioned below entire nav */
.mega-nav-wrapper {
  position: absolute !important;
  top: 100% !important; /* Directly below the nav bar */
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 999 !important;
  box-sizing: border-box !important;
}

/* Ensure mega nav displays correctly when open */
.mega-nav-wrapper.w--open {
  display: block !important;
}

/* Mega nav inner content - match Webflow's container-lg (1280px) */
.mega-nav-wrapper > .container-lg,
.mega-nav-wrapper .container-lg {
  max-width: 1280px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
}

/* ============================================= */
/*            ANIMATION ENHANCEMENTS            */
/* ============================================= */

/* Smooth transitions for interactive elements */
.transition-smooth {
  transition: all 0.3s ease;
}

/* ============================================= */
/*         STICKY NAV - SCROLL ANIMATION        */
/* ============================================= */
/*
 * Behavior (desktop only, JS skips tablet/mobile):
 * - Utility nav: Static in document flow, scrolls away naturally
 * - Main nav: position:sticky — sits below utility nav in flow,
 *   sticks to viewport top once utility nav scrolls away
 * - Main nav hides after 2s of scrolling down (transform)
 * - Main nav reappears immediately on scroll-up
 * - Overlap is impossible: sticky respects document flow
 *
 * JS controls: .nav-hidden, .nav-scrolled, .nav-animate classes
 */

/* UTILITY NAV - normal document flow, scrolls away */
.navigation.w-nav:not([data-doc-height]) {
  position: relative;
  z-index: 999;
}

/* MAIN NAV - sticky positioning, sticks at top: 0 when scrolled */
.navigation.w-nav[data-doc-height="1"] {
  position: sticky !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* Transition class - only added by JS during hide/show animations */
.navigation.w-nav.nav-animate {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hidden state - slides nav up off screen */
.navigation.w-nav.nav-hidden {
  transform: translateY(-100%) !important;
}

/* Shadow when nav is scrolled past its natural position */
.navigation.w-nav.nav-scrolled {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* ============================================= */
/*      MEGA NAV - LAYOUT & PROPORTIONS         */
/* ============================================= */
/*
 * Fix: Mega nav spacing, proportions, and text clipping
 * - Left column (inner-padding) and right card share equal height
 * - Grid items have consistent gaps and stretch proportionately
 * - Body text displays fully without clipping
 */

/* Container inside mega nav - equal-height columns with gap */
.mega-nav-wrapper .container-lg {
  align-items: stretch !important;
  gap: var(--_spacing---gap--lg) !important;
}

/* Left column fills available height */
.mega-nav-wrapper > .container-lg > .inner-padding.stacked {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Right card stretches to match left column */
.mega-nav-wrapper .layout-card.secondary {
  align-self: stretch !important;
}

/* Prevent mega nav overflow from clipping content */
.mega-nav-wrapper.w--open {
  overflow: visible !important;
}

/* Grid container - equal columns, consistent gap */
.layout-nav-services-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  align-items: stretch !important;
  gap: var(--_spacing---gap--lg) !important;
  flex: 1 !important;
}

/* Nav item columns - gap between cards, fill grid cell */
.layout-nav-services-grid .nav-item {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--_spacing---gap--md) !important;
  height: 100% !important;
}

/* List item cards - stretch proportionately, no fixed height */
.layout-nav-services-grid .list-item.row {
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  overflow: visible !important;
}

/* Image frames - consistent sizing */
.layout-nav-services-grid .img-frame-landscape.sm {
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  height: 90px !important;
  min-height: 90px !important;
  flex-shrink: 0 !important;
}

/* Content wrapper - fill remaining space, no clipping */
.layout-nav-services-grid .list-item.row .content-wrapper {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: visible !important;
  min-width: 0 !important;
}

/* Body text - ensure full display */
.layout-nav-services-grid .text_body-sm {
  overflow: visible !important;
  margin: 0 !important;
}


/* ============================================= */
/*      FORM SELECT CHEVRON - MATCH NAV STYLE   */
/* ============================================= */
/*
 * Replace browser default select chevron with
 * the same rounded-stroke chevron used in nav dropdowns
 */

.dropdown-button.w-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 24px 24px !important;
  padding-right: 52px !important;
  cursor: pointer;
}

/* ============================================= */
/*       IMAGE POSITION FIXES (SPECIFIC)        */
/* ============================================= */
/*
 * Targeted fixes for specific images where object-fit: cover
 * crops important content (e.g., heads in portrait photos).
 * Uses filename selectors to avoid affecting components globally.
 */

/* Doctor photo - New Patients page "Meet the Doctors" section */
.img[src*="tncld-landscape-4x-22"] {
  object-position: center 30% !important;
}

/* ============================================= */
/*        RESPONSIVE - TABLET & MOBILE          */
/* ============================================= */
/*
 * IMPORTANT: These must come AFTER the sticky nav section
 * so the position:relative overrides win over position:fixed.
 *
 * On tablet/mobile:
 * - Main nav reverts to position:relative (Webflow handles mobile menu)
 * - Utility nav stays visible
 * - Mobile menu goes edge-to-edge
 */

/* Utility nav - always visible on all breakpoints */
/* Override Webflow's nav collapse behavior for utility nav only */
.navigation.w-nav:not([data-doc-height]) .w-nav-menu {
  display: flex !important;
  position: static !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  background: transparent !important;
}

/* Tablet (991px and below) */
@media screen and (max-width: 991px) {
  /* Main nav - revert to relative so it doesn't overlap utility nav */
  .navigation.w-nav[data-doc-height="1"] {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    will-change: auto;
  }

  /* Force utility nav container visible */
  .navigation.w-nav:not([data-doc-height]) {
    display: flex !important;
    position: relative !important;
  }

  /* Force all utility nav parent elements visible */
  .navigation.w-nav:not([data-doc-height]) .layout_nav-utility,
  .navigation.w-nav:not([data-doc-height]) .col_nav {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Force utility nav MENU visible - override ALL Webflow collapse styles */
  .navigation.w-nav:not([data-doc-height]) .nav_submenu.w-nav-menu {
    display: flex !important;
    position: static !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Ensure no gap between utility and main nav */
  .navigation.w-nav:not([data-doc-height]),
  .navigation.w-nav[data-doc-height="1"] {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Mobile menu overlay - edge-to-edge */
  .navigation.w-nav[data-doc-height="1"] .w-nav-overlay {
    width: 100vw !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }

  /* Mobile menu content - full width, no max-width constraint */
  .navigation.w-nav[data-doc-height="1"] .nav_menu.w-nav-menu {
    width: 100% !important;
  }
}

/* Mobile (767px and below) */
@media screen and (max-width: 767px) {
  /* Main nav - revert to relative */
  .navigation.w-nav[data-doc-height="1"] {
    position: relative !important;
    top: 0 !important;
    transform: none !important;
    will-change: auto;
  }

  /* Force utility nav container visible */
  .navigation.w-nav:not([data-doc-height]) {
    display: flex !important;
    position: relative !important;
  }

  /* Force all utility nav parent elements visible */
  .navigation.w-nav:not([data-doc-height]) .layout_nav-utility,
  .navigation.w-nav:not([data-doc-height]) .col_nav {
    display: flex !important;
    flex-direction: column;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Force utility nav MENU visible - override ALL Webflow collapse styles */
  .navigation.w-nav:not([data-doc-height]) .nav_submenu.w-nav-menu {
    display: flex !important;
    position: static !important;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Utility nav buttons stack vertically on mobile */
  .navigation.w-nav:not([data-doc-height]) .button_ghost.small {
    display: flex !important;
    justify-content: center;
    width: 100%;
  }

  /* Adjust utility nav layout for mobile */
  .navigation.w-nav:not([data-doc-height]) .container-lg {
    display: flex !important;
    flex-direction: column;
    padding: 0.5rem 1rem;
  }

  /* Remove gap above nav */
  body {
    padding-top: 0 !important;
  }
}

/* ============================================= */
/*               END OF FILE                    */
/* ============================================= */