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: #3B5F7D;
  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;
  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: #3B5F7D;
  color: #FFFFFF;
  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: #FFFFFF;
  text-decoration: none;
  font-size: 1.5rem;
  transition: color 0.2s;
}
.nav a:hover {
  color: #D6EBF2;
}

/* 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;
  }

  .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('./hero.webp') center/cover no-repeat; background-color: #00667F; 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: #F4E3C1;
  color: #1C1C1C;
}

.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: #D6EBF2;
  padding: 2rem 0;
}

footer {
  font-size: 0.9rem;
  padding: 2rem 0 1rem 0;
  color: #FFFFFF;
  background: #3B5F7D;
  text-align: center;
}

.primary h4 {
  color: #3B5F7D;
}

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

a { color: #00667F; }

.secondary a:hover {color: #8E3200; }

.secondary svg.icon:hover,  a:hover svg.icon {fill: #8E3200; }

svg.icon {
  fill: #00667F;
 }

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;
  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;
}
a.whatsapp {
  background:#25D366;
}

a.phone {
  background: #00667F;
}

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

span.d-block {display: block}

@media (prefers-color-scheme: dark) {
  .nav-toggle-label {
    background: #0D141A;
  }
  .nav-toggle-label span,
  .nav-toggle-label span::before,
  .nav-toggle-label span::after {
    background: #FFFFFF;
  }
  .nav {
    background: #0D141A;
    color: #FFFFFF;
  }
  .nav a {
    color: #FFFFFF;
  }
  .nav a:hover {
    color: #F4E3C1;
  }
  .secondary {
    background-color: #1A242C;
    color: #B0D3E1;
  }
    
  .primary {
    background: #121C23;
    color: #B0D3E1;
  }

  footer {
    color: #B0D3E1;
    background: #1C1C1C;
  }

  .primary h4 {
    color: #7BB3D1;
  }

  a { color: #48C0E6; }

  .secondary a:hover {color: #F4E3C1; }

  .secondary svg.icon:hover,  a:hover svg.icon {fill: #F4E3C1; }

  svg.icon {
    fill: #48C0E6;
  }
}