/* ================================================
   SHARED.CSS – gedeelde stijlen voor alle pagina's
   N.Iris Beauty
================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Source Sans Pro', sans-serif;
  background-color: #eeeeee;
  color: #000;
}

a { text-decoration: none; color: inherit; }

/* ================================================
   HEADER / NAVIGATIE
================================================ */
header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #fff;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}

.header-social {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 14px;
  align-items: center;
}

.header-social a {
  font-size: 15px;
  color: #000;
  transition: opacity 0.25s;
}

.header-social a:hover { opacity: 0.5; }

nav {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 860px;
}

.nav-left,
.nav-right {
  flex: 1;
  display: flex;
  gap: 28px;
  list-style: none;
}

.nav-right { justify-content: flex-end; }

.nav-left a,
.nav-right a {
  font-family: 'Cardo', serif;
  font-size: 14px;
  letter-spacing: 0.42px;
  color: #000;
  position: relative;
}

.nav-left a::after,
.nav-right a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: #000;
  transition: width 0.25s;
}

.nav-left a:hover::after,
.nav-right a:hover::after,
.nav-left a.active::after,
.nav-right a.active::after { width: 100%; }

.nav-logo {
  flex-shrink: 0;
  padding: 0 36px;
}

.nav-logo img {
  height: 58px;
  width: auto;
  display: block;
}

/* ================================================
   FOOTER
================================================ */
footer {
  background: #111;
  color: #fff;
  padding: 60px 48px 32px;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1060px;
  margin: 0 auto 44px;
  gap: 40px;
}

.footer-address,
.footer-hours-col { flex: 1; }

.footer-address h4,
.footer-hours-col h4 {
  font-family: 'Oswald', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-address address {
  font-style: normal;
  font-size: 14px;
  line-height: 2.1;
  color: #bbb;
}

.footer-logo-center {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-logo-center img {
  height: 155px;
  width: auto;
  filter: brightness(0) invert(1);
}

.footer-hours-col { text-align: right; }

.footer-hours-col table {
  font-size: 14px;
  color: #bbb;
  border-collapse: collapse;
  margin-left: auto;
}

.footer-hours-col td { padding: 5px 0; }
.footer-hours-col td:first-child { padding-right: 32px; text-align: left; }

.footer-bottom {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}

.footer-line {
  flex: 1;
  height: 1px;
  background: #333;
}

.footer-social {
  display: flex;
  gap: 20px;
  padding: 0 34px;
}

.footer-social a {
  color: #fff;
  font-size: 17px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #222;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s;
}

.footer-social a:hover { background: #444; }

/* ================================================
   RESPONSIVE – gedeeld
================================================ */
@media (max-width: 900px) {
  .header-social { display: none; }
  .nav-logo { padding: 0 20px; }
  .nav-left, .nav-right { gap: 16px; }
  .nav-left a, .nav-right a { font-size: 12px; }
  .footer-top { flex-direction: column; align-items: center; text-align: center; }
  .footer-hours-col { text-align: center; }
  .footer-hours-col table { margin: 0 auto; }
  .footer-hours-col td:first-child { padding-right: 20px; }
}

@media (max-width: 600px) {
  header { height: 70px; padding: 0 12px; }
  nav { max-width: 100%; }
  .nav-left, .nav-right { gap: 10px; }
  .nav-left a, .nav-right a { font-size: 11px; letter-spacing: 0; }
  .nav-logo img { height: 42px; }
  .nav-logo { padding: 0 12px; }
  footer { padding: 40px 24px 24px; }
}