body, html {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Mobile-first header */
header {
  position: relative;
}

/* Hidden checkbox */
.nav-toggle {
  display: none;
}

/* Hamburger Button */
.nav-toggle-label {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 48px;
  height: 48px;
  background: #C75B3A;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  content: '';
  display: block;
  background: #FFFFFF; /* White for lines */
  height: 2px;
  width: 18px;
  border-radius: 2px;
  position: relative;
  transition: all 0.3s ease;
}

.nav-toggle-label span::before {
  top: -6px;
  position: absolute;
}

.nav-toggle-label span::after {
  top: 6px;
  position: absolute;
}

/* Animate to X when open */
.nav-toggle:checked + .nav-toggle-label span {
  background: transparent;
}

.nav-toggle:checked + .nav-toggle-label span::before {
  transform: rotate(45deg);
  top: 0;
}

.nav-toggle:checked + .nav-toggle-label span::after {
  transform: rotate(-45deg);
  top: 0;
}

/* Slide-in nav menu */
.nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: #D1C6B4; /* Navigation Background (Light Mode) */
  color: #3f2b2d;      /* Navigation Foreground (Light Mode) */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: right 0.3s ease;
  z-index: 1000;
}

.nav ul {
  list-style: none;
  padding: 0;
  text-align: center;
}

.nav li {
  margin: 1rem 0;
}

.nav a {
  color: #3f2b2d;      /* Link Color (Light Mode) */
  text-decoration: none;
  font-size: 1.5rem;
  transition: color 0.2s;
}

.nav a:hover {
  color: #C75B3A;      /* Link Hover Color (Light Mode) */
}

/* Toggle menu open */
.nav-toggle:checked ~ .nav {
  right: 0;
}

/* Desktop Styles */
@media (min-width: 768px) {
  .nav-toggle-label {
    display: none;
  }

  .nav {
    position: static;
    height: auto;
    width: 100%;
    background: transparent;
    flex-direction: row;
    justify-content: center;
    padding: 0;
  }

  .nav ul {
    display: flex;
    gap: 2rem;
    border-radius: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
  }

  .nav li {
    margin: 0;
  }

  .nav a {
    font-size: 1rem;
    color: #FFFFFF; /* Adapt if needed for Dark Mode */
  }

  .nav a:hover {
    color: #FFFFFF;
    text-decoration: underline;
  }

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

.hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.logo {
  width: 100%;
  max-width: 320px;
  min-width: 128px;
  height: auto; /* preserves aspect ratio */
}

.hero.apollonia {
  background: url('./salonedante1.avif') center/cover no-repeat;
  background-color: #d78a5A; /* Adapt as needed for new palette */
  height: 100vh;
}

.responsive-image {
  max-width: 100%;
  height: auto;
  display: block;
}

.meta-icon {
  width: 48px;
  height: auto;
  display: block;
}

.tagline {
  font-size: 1.5rem;
  font-weight: normal;
}

.secondary {
  padding: 2rem 0;
  background-color: #D5C7A7; /* Secondary Background (Light Mode) */
  color: #3f2b2d;             /* Secondary Foreground (Light Mode) */
}

.contrast-help {
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem;
  margin: 1rem;
  border-radius: 1rem;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

div.hflex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.primary {
  background: #f8eed5;  /* Primary Background (Light Mode) */
  padding: 2rem 0;
}

footer {
  font-size: 0.9rem;
  padding: 2rem 0 1rem 0;
  color: #FFFFFF; /* Footer Text Color (Light Mode) */
  background: #C75B3A; /* Footer Background (Light Mode) */
  text-align: center;
}

.primary h4 {
  color: #3f2b2d; /* Primary Header Color */
}

span.d-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

a {
  color: #6F2C1B;
}

.secondary a:hover {
  color: #C75B3A; /* Secondary Link Hover Color (Light Mode) */
}

.secondary svg.icon:hover,
a:hover svg.icon {
  fill: #C75B3A; /* Icon Hover Color (Light Mode) */
}

svg.icon {
  fill: #6F2C1B; /* Accent Background (Light Mode) */
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  font-size: inherit;
  line-height: 1.4;
}

.text {
  line-height: 2;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 0.5rem;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 1rem; }

.contact-widget {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  z-index: 1000;
}

.contact-widget a {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; /* Contact Widget Icon Color */
  border-radius: 50%;
  font-size: 1.5rem;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.contact-widget a:hover {
  transform: scale(1.1);
}

.contact-widget svg {
  fill: #FFFFFF; /* Contact Widget Icon Color */
}

a.whatsapp {
  background: #25D366; /* WhatsApp Background Color */
}

a.phone {
  background: #d78a5A; /* Phone Background Color */
}

.contact-widget svg {
  width: 32px;
  height: 32px;
}

span.d-block {
  display: block;
}

@media (prefers-color-scheme: dark) and (max-width: 767px) {
  .nav {
    background: #0D141A; /* Dark Navigation Background */
  }
}

@media (prefers-color-scheme: dark) {
  .nav-toggle-label {
    background: #0D141A; /* Dark Toggle Background */
  }
  
  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    background: #FFFFFF; /* White for lines in Dark Mode */
  }
  
  .nav {
    color: #FFFFFF;      /* Dark Mode Text Color */
  }
  
  .nav a {
    color: #E4C7B2;      /* Dark Mode Link Color */
  }
  
  .nav a:hover {
    color: #C75B3A; /* Dark Mode Link Hover Color */
  }

  .secondary {
    background-color: #3B2B2C; /* Dark Mode Secondary Background */
    color: #E4C7B2;             /* Dark Mode Secondary Foreground */
  }

  .primary {
    background: #3E1B1B; /* Dark Mode Primary Background */
    color: #E4C7B2;      /* Dark Mode Primary Foreground */
  }

  footer {
    color: #E4C7B2;      /* Dark Mode Footer Text Color */
    background: #2A1D1B; /* Dark Mode Footer Background */
  }

  .primary h4 {
    color: #7BB3D1;      /* Dark Mode Primary Header Color */
  }

  a {
    color: #E4C7B2;      /* Dark Mode Accent Foreground */
  }

  .secondary a:hover {
    color: #B88A7D;      /* Dark Mode Secondary Link Hover Color */
  }

  .secondary svg.icon:hover, a:hover svg.icon {
    fill: #B88A7D;      /* Icon Hover Color in Dark Mode */
  }

  svg.icon {
    fill: #E4C7B2;      /* Dark Mode Accent Background */
  }
}