/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #f8f1ea;
  --text: #333;
  --menu-pill: #fff;
  --active: #e0c9b5;
}

html, body {
  font-family: Arial, sans-serif;
  color: var(--text);
  background: #ffffff;
  min-height: 100%;
}

/* Header base (desktop-first, then consolidate mobile overrides later) */
nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  min-height: 80px;
  height: 80px;
  background: var(--bg);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 16px;
  transition: transform 0.3s ease;
}

/* Hide-on-scroll behavior (kept for compatibility with navigation.js) */
nav.nav-hidden { transform: translateY(-100%); }

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  height: 40px;
}
.nav-logo img {
  height: 100%;
  width: auto;
  max-width: 40px;
  object-fit: contain;
}

/* Inline menu container (desktop) */
nav .menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;

  height: 48px;
  padding: 15px 12px;
  background: var(--menu-pill);
  border-radius: 30px;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
}

.menu a {
  text-decoration: none;
  color: var(--text);
  padding: 13px 19px;
  border-radius: 25px;
  font-weight: bold;
  transition: background-color .3s, color .3s;
}
.menu a:hover { background: #f0f0f0; }
.menu a.active { background: var(--active); color: var(--text); }

/* Hamburger (hidden on desktop) */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  position: relative;
  z-index: 101;
}
.hamburger span {
  display: block;
  width: 25px; height: 3px;
  background: var(--text);
  border-radius: 2px;
  margin: 5px 0;
  transition: .3s;
}
/* X animation */
.hamburger.active span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }

/* Content layout helpers */
main, main.content {
  margin-top: 150px; /* ensures content starts below fixed header */
}
.content {
  width: 90%;
  margin: auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
}

/* --- Oeuvre header variant --- */
.nav-oeuvre {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background: var(--bg);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 16px;
  min-height: 80px;
  height: 80px;
}
.nav-oeuvre .back-button {
  font-size: 1rem;
  background: var(--active);
  color: var(--text);
  border: none;
  border-radius: 20px;
  padding: 6px 18px;
  font-weight: bold;
  text-decoration: none;
  transition: background .2s;
}
.nav-oeuvre .back-button:hover { background: #c9b29e; }

/* Default sizing scale */
nav, .menu a, .logo, .nav-oeuvre .menu, .nav-oeuvre .back-button { font-size: 1.07em; }

/* -------------------- Mobile layout <= 768px -------------------- */
@media (max-width: 768px) {
  /* Remove global body padding to avoid shrinking overlay width on iOS */
  /* Safe-area will be handled inside overlay + hamburger offsets only */
  /* body padding removed intentionally */

  /* Reduce slight overall font size to fit narrow viewports */
  nav, .menu a, .logo, .nav-oeuvre .menu, .nav-oeuvre .back-button { font-size: 1.03em; }

  /* Header row spacing */
  nav, .nav-oeuvre {
    min-height: 80px;
    height: 80px;
    padding-inline: 12px;
  }

  /* Show hamburger on mobile, pin to top-right with safe-area */
  .hamburger {
    display: block;
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    z-index: 1100; /* must be above the overlay menu */
  }

  /* Fullscreen overlay menu (hidden by default) */
  nav .menu,
  .nav-oeuvre .menu {
    position: fixed;
    inset: 0;           /* top:0; right:0; bottom:0; left:0 */
    left: 0;            /* ensure full-width coverage */
    right: 0;
    width: 100%;
    height: 100vh;      /* fallback */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* center links */
    gap: 38px;
    margin: 0;
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-right: calc(24px + env(safe-area-inset-right));
    padding-left: calc(24px + env(safe-area-inset-left));
    border-radius: 0;
    box-shadow: none;
    background: var(--bg);
    transform: translateX(-100%);   /* hidden state */
    transition: transform .3s ease; /* use transform instead of left */
    z-index: 1000; /* below hamburger */
    overflow: hidden;
  }
  /* Use dynamic viewport on modern iOS for correct height with URL bar */
  @supports (height: 100dvh) {
    nav .menu,
    .nav-oeuvre .menu { height: 100dvh; }
  }
  nav .menu.active,
  .nav-oeuvre .menu.active { transform: translateX(0); }

  /* Ensure back button and layout on oeuvre pages */
  .nav-oeuvre {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav-oeuvre .back-button { order: 1; }
}

/* Keep the centered pill menu on desktop only */
@media (min-width: 769px) {
  nav .menu, .nav-oeuvre .menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: var(--menu-pill);
    border-radius: 30px;
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
    padding: 15px 12px;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 30px;
  }
}