/* Fixed navigation styling */
header.main-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 0.3s, box-shadow 0.3s;
  box-shadow: none;
}

/* Add padding to main content to account for fixed header */
body:not(.hero-layout) #main-content {
  padding-top: 8px; /* Smaller base padding for fixed header */
}

@media (max-width: 768px) {
  body:not(.hero-layout) #main-content {
    padding-top: 120px; /* Allow space for wrapped navigation rows */
  }

  body:not(.hero-layout) #main-content > .container > section,
  body:not(.hero-layout) #main-content > .container > form,
  body:not(.hero-layout) #main-content > .container > div.add-url-form-card,
  body:not(.hero-layout) #main-content > .container > section.add-url-form-card {
    padding-top: 120px;
  }
}

/* Add padding to form sections and other direct content */
body:not(.hero-layout) #main-content > .container > section,
body:not(.hero-layout) #main-content > .container > form,
body:not(.hero-layout) #main-content > .container > div.add-url-form-card,
body:not(.hero-layout) #main-content > .container > section.add-url-form-card {
  padding-top: 24px;
}

/* Small top space for full-width pages like /urls */
body:not(.hero-layout) #main-content > .container.container--full > section,
body:not(.hero-layout) #main-content > .container.container--full > form,
body:not(.hero-layout) #main-content > .container.container--full > div.add-url-form-card,
body:not(.hero-layout) #main-content > .container.container--full > section.add-url-form-card {
  padding-top: 16px;
}

/* Apply offset at the container level too (covers pages where first child isn't a section) */
body:not(.hero-layout) #main-content > #content-wrapper.container.container--full {
  padding-top: 60px !important; /* matches your chosen offset */
}

/* Hero layout doesn't need the padding because it has a different design */
body.hero-layout #main-content {
  padding-top: 0;
}

/* Transparent header for hero section */
/* Hero layout inherits transparency from base rule */

/* Scrolled state for the header */
header.main-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Dark mode styles */
html[data-theme="dark"] header.main-header,
html[data-theme="dark"] header.main-header.scrolled {
  background: rgba(24, 26, 27, 0.95);
}