/* ============================================
   myNafplio — Shared Stylesheet
   ============================================ */

/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;1,14..32,300;1,14..32,400&display=swap');

/* VARIABLES */
:root {
  --ink:          #2C1810;
  --ink-deep:     #1A0E08;
  --parchment:    #F7F1E8;
  --warm-white:   #FDFAF5;
  --terracotta:   #C1532A;
  --terra-light:  #E8896A;
  --terra-dim:    rgba(193,83,42,0.08);
  --sea:          #2C6E7A;
  --sea-dim:      rgba(44,110,122,0.1);
  --gold:         #C49A2A;
  --gold-dim:     rgba(196,154,42,0.12);
  --dust:         #9A8E7F;
  --muted:        #8A7F72;
  --border:       rgba(44,24,16,0.09);
}

/* RESET */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; background:var(--warm-white); color:var(--ink); overflow-x:hidden; }

/* ============================================
   TOP NAV (shared across public pages)
   ============================================ */
#top-nav {
  position:fixed; top:0; left:0; right:0; z-index:300;
  height:64px; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; padding:0 40px;
  background:rgba(253,250,245,.96);
  backdrop-filter:blur(16px);
  box-shadow:0 1px 0 var(--border);
}
.top-nav-left  { display:flex; align-items:center; }
.top-nav-right { display:flex; align-items:center; justify-content:flex-end; }
.nav-back {
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:500; color:var(--muted);
  text-decoration:none; transition:color .2s; padding:6px 0;
}
.nav-back:hover { color:var(--terracotta); }
.nav-back svg { width:16px; height:16px; }
.nav-logo {
  font-size:20px; font-weight:800; color:var(--ink);
  text-decoration:none; letter-spacing:-.04em;
  text-align:center; white-space:nowrap;
}
.nav-logo span { color:var(--terracotta); }
.nav-badge {
  font-size:11px; font-weight:600; color:var(--muted);
  background:var(--parchment); padding:5px 12px;
  border-radius:20px; border:1px solid var(--border);
}
.hamburger {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:6px; background:none; border:none;
}
.hamburger span {
  display:block; width:22px; height:1.5px;
  background:var(--ink); border-radius:2px;
  transition:transform .35s, opacity .25s; transform-origin:center;
}
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  position:fixed; inset:0; z-index:250; background:var(--ink-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.mobile-menu.open { opacity:1; pointer-events:all; }
.mobile-nav-links { list-style:none; text-align:center; width:100%; }
.mobile-nav-links li { border-bottom:1px solid rgba(247,241,232,.06); }
.mobile-nav-links li:last-child { border-bottom:none; }
.mobile-nav-links a {
  display:block; font-size:clamp(26px,6vw,38px); font-weight:700;
  letter-spacing:-.025em; color:rgba(247,241,232,.72);
  text-decoration:none; padding:16px 0; transition:color .2s;
}
.mobile-nav-links a:hover { color:var(--terra-light); }
.mobile-cta {
  margin-top:36px; padding:15px 44px;
  background:var(--terracotta); color:white;
  border-radius:50px; font-size:16px; font-weight:600; text-decoration:none;
}

/* ============================================
   BOTTOM NAV (guest + visitor)
   ============================================ */
#guest-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:500;
  display:none; background:#2C1810;
  border-top:1px solid rgba(255,255,255,0.06);
  box-shadow:0 -4px 30px rgba(28,15,8,0.4);
  padding-bottom:max(8px,env(safe-area-inset-bottom));
}
#guest-nav .nav-inner {
  display:flex; align-items:center; justify-content:space-around;
  padding:8px 0 4px;
}
#guest-nav .nav-tab {
  display:flex; flex-direction:column; align-items:center;
  gap:3px; padding:4px 10px; cursor:pointer; border:none;
  background:transparent; opacity:.45; transition:opacity .2s;
  text-decoration:none; flex:1; min-width:0;
  font-family:'Inter',sans-serif;
}
#guest-nav .nav-tab.active  { opacity:1; }
#guest-nav .nav-tab:hover   { opacity:.75; }
#guest-nav .nav-tab-icon    { width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:#F7F1E8; flex-shrink:0; }
#guest-nav .nav-tab-icon svg { width:20px; height:20px; display:block; }
#guest-nav .nav-tab-label   { font-size:9px; color:#F7F1E8; letter-spacing:.04em; white-space:nowrap; display:block; }
#guest-nav .nav-tab.property-tab { opacity:1; }
#guest-nav .nav-tab.property-tab .nav-tab-label { color:#E8896A; }
body.has-guest-nav { padding-bottom:62px; }

/* ============================================
   BADGES
   ============================================ */
.badge { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:20px; }
.badge-host     { background:rgba(196,154,42,.92); color:white; }
.badge-pro      { background:rgba(193,83,42,.88); color:white; }
.badge-free     { background:rgba(44,24,16,.5); color:rgba(247,241,232,.7); }
.badge-featured { background:rgba(193,83,42,.1); color:var(--terracotta); }

/* ============================================
   SKELETONS
   ============================================ */
.skel {
  background:linear-gradient(90deg,#ede8e0 25%,#e2ddd5 50%,#ede8e0 75%);
  background-size:200% 100%;
  animation:skel 1.4s ease-in-out infinite;
  border-radius:6px;
}
@keyframes skel { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ============================================
   REVEAL ANIMATION
   ============================================ */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .5s, transform .5s; }
.reveal.visible { opacity:1; transform:none; }
.rd1 { transition-delay:.07s; }
.rd2 { transition-delay:.14s; }
.rd3 { transition-delay:.21s; }

/* ============================================
   UTILITIES
   ============================================ */
.divider { height:1px; background:var(--border); margin:28px 0; }
.sec-label { font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.accent { color:var(--terracotta); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media(max-width:1024px) {
  #top-nav { padding:0 20px; }
  .nav-badge { display:none; }
  .hamburger { display:flex; }
}
@media(max-width:640px) {
  body.has-guest-nav { padding-bottom:62px; }
}