/* =========================================
   Dental Pulse - Minimal Custom Styles
   Using Quark as base, only essential overrides
   ========================================= */

/* Design Tokens - OKLch color space */
:root {
  /* Primary Colors */
  --primary: oklch(0.5417 0.1790 288.0332);
  --primary-foreground: oklch(1.0000 0 0);

  /* Secondary */
  --secondary: oklch(0.9174 0.0435 292.6901);
  --secondary-foreground: oklch(0.4143 0.1039 288.1742);

  /* Accent */
  --accent: oklch(0.7042 0.1602 288.9880 / 0.2);
  --accent-foreground: oklch(0.3015 0.0572 282.4176);

  /* Background & Foreground */
  --background: oklch(1.0000 0 0);
  --foreground: oklch(0.3015 0.0572 282.4176);

  /* Card */
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.3015 0.0572 282.4176);

  /* Muted */
  --muted: oklch(0.9580 0.0133 286.1454);
  --muted-foreground: oklch(0.5426 0.0465 284.7435);

  /* Border & Input */
  --border: oklch(0.9115 0.0216 285.9625);
  --input: oklch(0.9115 0.0216 285.9625);

  /* Ring */
  --ring: oklch(0.5417 0.1790 288.0332);

  /* Charts */
  --chart-1: oklch(0.5417 0.1790 288.0332);
  --chart-2: oklch(0.7042 0.1602 288.9880);
  --chart-3: oklch(0.5679 0.2113 276.7065);
  --chart-4: oklch(0.6356 0.1922 281.8054);
  --chart-5: oklch(0.4509 0.1758 279.3838);

  /* Shadows */
  --shadow-2xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
  --shadow-xs: 0px 4px 10px 0px hsl(240 30% 25% / 0.06);
  --shadow-sm: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12);
  --shadow-md: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12);
  --shadow-lg: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12);
  --shadow-xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12);
  --shadow-2xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.30);

  /* Radius */
  --radius: 0.5rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

/* Apply primary color to Quark elements */
.btn-primary,
a.btn-primary {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-color: var(--primary) !important;
  border: none;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-primary:hover,
a.btn-primary:hover {
  opacity: 0.9;
  box-shadow: var(--shadow-md);
}

/* Navbar links - default dark, white on transparent header */
#header .dropmenu ul li a {
  color: var(--foreground) !important;
}

.header-transparent #header .dropmenu ul li a {
  color: white !important;
}

#header.scrolled .dropmenu ul li a {
  color: var(--foreground) !important;
}

#header .dropmenu ul li a:hover,
#header .dropmenu ul li a:focus {
  color: var(--primary) !important;
  opacity: 1;
}

#header .dropmenu ul li.active a {
  color: var(--primary) !important;
  opacity: 1;
  font-weight: 600;
}

.header-transparent #header .dropmenu ul li a:hover,
.header-transparent #header .dropmenu ul li a:focus {
  color: white !important;
  opacity: 0.8;
}

.header-transparent #header .dropmenu ul li.active a {
  color: white !important;
  opacity: 1;
  font-weight: 600;
}

#header.scrolled .dropmenu ul li a:hover,
#header.scrolled .dropmenu ul li a:focus {
  color: var(--primary) !important;
  opacity: 1;
}

#header.scrolled .dropmenu ul li.active a {
  color: var(--primary) !important;
  opacity: 1;
  font-weight: 600;
}

/* Primary color for other links */
a {
  color: var(--primary) !important;
}

/* Logo text - default gradient, white on transparent header */
.logo-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-size: 1.4rem;
  font-weight: 700;
}

.header-transparent #header .logo-text {
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  background-clip: initial;
  color: white;
}

#header.scrolled .logo-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* When mobile menu is open, change logo to primary gradient */
body:has(.overlay.open) #header .logo-text,
body.mobile-menu-open #header .logo-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Navbar container width - match modular sections (1280px) */
#header .container {
  max-width: 1280px;
}

/* Content containers width - match navbar (1280px) */
#body-wrapper .container,
.section .container {
  max-width: 1280px;
  margin: 0 auto;
}

/* Navbar layout - logo left, navigation right */
#header .navbar {
  justify-content: flex-start;
}

#header .navbar-section.logo {
  flex: 0 0 auto;
}

#header .navbar-section.desktop-menu {
  flex: 1 1 auto;
  justify-content: flex-end;
  margin-left: auto;
}

#header .navbar-section:last-child {
  flex: 0 0 auto;
}

/* Navbar actions */
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Hamburger menu color - primary by default, white on transparent header */
.mobile-menu {
  z-index: 10000 !important;
}

.mobile-menu .button_container {
  z-index: 10000 !important;
  position: fixed !important;
}

.mobile-menu .button_container span {
  background: var(--primary) !important;
}

.header-transparent .mobile-menu .button_container span {
  background: white !important;
}

/* When mobile menu is open, change hamburger to primary color */
body:has(.overlay.open) .mobile-menu .button_container span,
body.mobile-menu-open .mobile-menu .button_container span {
  background: var(--primary) !important;
}

#header.scrolled ~ .mobile-menu .button_container span {
  background: var(--primary) !important;
}

/* =========================================
   Navbar Height Adjustments
   ========================================= */

/* Increase navbar height - override Quark defaults */
#header {
  height: 4rem !important; /* was 5rem (80px), now 64px - kompaktowa wersja */
  background: white !important;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999 !important;
}

/* Transparent background on home page (shows hero gradient through) */
.header-transparent #header {
  background: transparent !important;
  box-shadow: none !important;
}

/* White background when scrolled (applies to all pages) */
#header.scrolled {
  background: white !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#header .navbar-section {
  height: 4rem !important;
}

#header .logo svg,
#header .logo img {
  height: 50px !important; /* was 50px - kompaktowa wersja */
}

/* Navbar when scrolled - make it bigger than Quark default */
body.header-fixed.header-animated #header.scrolled {
  height: 3rem !important; /* was 3.5rem (56px), now 48px - kompaktowa wersja */
}

body.header-fixed.header-animated #header.scrolled .navbar-section {
  height: 3rem !important;
}

body.header-fixed.header-animated #header.scrolled .logo svg,
body.header-fixed.header-animated #header.scrolled .logo img {
  height: 40px !important; /* was 36px - kompaktowa wersja */
}

/* Adjust body padding for taller header */
.header-fixed #body-wrapper {
  padding-top: 4rem !important; /* match new header height */
}

/* =========================================
   Mobile Layout - Button & Hamburger
   ========================================= */

@media (max-width: 840px) {
  /* Make navbar actions section visible and position it to the right */
  #header .navbar-section:last-child {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    margin-left: auto;
    margin-right: 2.5rem; /* space for hamburger with smaller gap */
  }

  /* Center hamburger vertically in navbar (navbar height 4rem = 64px, hamburger 24px) */
  .mobile-menu .button_container {
    right: 1rem;
    top: 1.25rem !important; /* (64px - 24px) / 2 = 20px = 1.25rem - kompaktowa wersja */
  }

  /* Center hamburger when header is scrolled (navbar height 3rem = 48px) */
  body.header-fixed.header-animated #header.scrolled ~ .mobile-menu .button_container {
    top: 0.75rem !important; /* (48px - 24px) / 2 = 12px = 0.75rem - kompaktowa wersja */
  }

  /* Make the button smaller on mobile and fix vertical alignment */
  #header .navbar-actions {
    display: flex;
    align-items: center;
    height: 100%;
  }

  #header .navbar-actions .btn-primary {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
  }
}

/* Hide button on very narrow screens */
@media (max-width: 430px) {
  #header .navbar-section:last-child {
    display: none !important;
  }

  /* Adjust navbar section margin when button is hidden */
  #header .navbar-section {
    margin-right: 3rem !important;
  }
}

/* =========================================
   Mobile Menu Overlay Styles
   ========================================= */

/* Light background for mobile menu */
.mobile-container .overlay {
  background: var(--background) !important;
}

.mobile-container .overlay.open {
  opacity: 1 !important;
}

/* Overlay menu container */
.mobile-container .overlay-menu {
  padding: 1rem 0 !important;
}

/* Mobile menu items - card style with spacing */
.mobile-container .overlay-menu .treemenu li,
.mobile-container .overlay-menu ul.treemenu-root li,
.overlay .overlay-menu .treemenu li {
  list-style: none !important;
  list-style-type: none !important;
  margin: 0.75rem 1rem !important;
  padding: 0 !important;
  background: white !important;
  border: 1px solid var(--border) !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
  line-height: normal !important;
}

.mobile-container .overlay-menu .treemenu li:hover,
.mobile-container .overlay-menu ul.treemenu-root li:hover,
.overlay .overlay-menu .treemenu li:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--primary) !important;
}

/* Menu links styling */
.mobile-container .overlay-menu .treemenu li a,
.mobile-container .overlay-menu ul.treemenu-root li a,
.overlay .overlay-menu .treemenu li a {
  display: block !important;
  padding: 1rem 1.5rem !important;
  margin: 0 !important;
  margin-left: 0 !important;
  color: var(--foreground) !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.mobile-container .overlay-menu .treemenu li a:hover,
.mobile-container .overlay-menu .treemenu li a:focus,
.mobile-container .overlay-menu .treemenu li a.active,
.overlay .overlay-menu .treemenu li a:hover,
.overlay .overlay-menu .treemenu li a:focus,
.overlay .overlay-menu .treemenu li a.active {
  color: var(--primary) !important;
}

/* Mobile logo styling */
.mobile-container .mobile-logo {
  padding: 2rem 1rem 1rem !important;
}

.mobile-container .mobile-logo .logo-text {
  color: var(--primary) !important;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Adjust root menu margins */
.mobile-container .overlay-menu .treemenu.treemenu-root,
.mobile-container .overlay-menu ul.treemenu-root {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove nested menu indentation for cleaner look */
.mobile-container .overlay-menu .treemenu ul,
.mobile-container .overlay-menu ul.treemenu-root ul {
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile menu CTA button - styled like menu cards */
.mobile-container .mobile-menu-cta {
  margin: 0.75rem 1rem !important;
  padding: 0 !important;
}

.mobile-container .mobile-menu-cta .btn-primary {
  display: block !important;
  width: 100% !important;
  padding: 1rem 1.5rem !important;
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 500 !important;
  text-align: center !important;
  text-decoration: none !important;
  background: var(--primary) !important;
  color: white !important;
  border: 1px solid var(--primary) !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: auto !important;
  vertical-align: baseline !important;
  white-space: normal !important;
}

.mobile-container .mobile-menu-cta .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
  opacity: 0.9 !important;
}

/* =========================================
   Typography - Global Font Sizes
   ========================================= */

/* Base font size */
body {
  font-size: 0.9375rem;
  line-height: 1.75;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0 !important;
}

h1 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

h2 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

h3 {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

h4 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

h5 {
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

h6 {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
}

/* Paragraphs */
p {
  font-size: 0.9375rem;
  line-height: 1.75;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  body {
    font-size: 0.875rem;
  }

  h1 {
    font-size: 1.25rem !important;
  }

  h2 {
    font-size: 1.125rem !important;
  }

  h3 {
    font-size: 1rem !important;
  }

  h4 {
    font-size: 0.9375rem !important;
  }

  h5, h6 {
    font-size: 0.875rem !important;
  }

  p {
    font-size: 0.875rem;
  }
}

/* =========================================
   Logo Switching - Light/Dark variants
   ========================================= */

/* Default state - dark logo visible, light logo hidden (for all pages) */
#header .navbar-brand .logo-light {
  display: none !important;
}

#header .navbar-brand .logo-dark {
  display: block !important;
}

/* On transparent header (home page, not scrolled) - show light logo, hide dark */
.header-transparent #header .navbar-brand .logo-light {
  display: block !important;
}

.header-transparent #header .navbar-brand .logo-dark {
  display: none !important;
}

/* When scrolled on any page (including home) - show dark logo, hide light */
#header.scrolled .navbar-brand .logo-light {
  display: none !important;
}

#header.scrolled .navbar-brand .logo-dark {
  display: block !important;
}

/* Ensure smooth transitions */
.navbar-brand img {
  transition: opacity 0.3s ease;
  height: 40px !important;
  width: auto;
}

body.header-fixed.header-animated #header.scrolled .navbar-brand img {
  height: 40px !important;
}

/* That's it - everything else from Quark */