/* ============================================
   RamblinOz — Shared Site Styles
   Used by: about, blog, trips inner pages
   ============================================ */

/* Variables */
:root {
  --ochre: #C4783E;
  --ochre-light: #D4945A;
  --rust: #A0522D;
  --sand: #F5ECD7;
  --sand-light: #FAF6EE;
  --charcoal: #2C2C2C;
  --charcoal-light: #4A4A4A;
  --sage: #7A8B6F;
  --cream: #FFFDF7;
}

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

/* Body */
body { font-family: 'Source Sans 3', sans-serif; color: var(--charcoal); background: var(--cream); line-height: 1.8; font-weight: 300; }

/* ---- Navigation ---- */
.site-nav { background: var(--charcoal); padding: 0.6rem 0; position: sticky; top: 0; z-index: 100; }
.nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.nav-logo img, .nav-logo picture img { width: 48px; height: 48px; border-radius: 50%; }
.nav-site-name { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700; color: white; }
.nav-links { display: flex; gap: 1.8rem; }
.nav-links a { text-decoration: none; color: rgba(255,255,255,0.7); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; transition: color 0.3s; }
.nav-links a:hover, .nav-links a.active { color: var(--ochre-light); }
.mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.mobile-menu-btn span { display: block; width: 22px; height: 2px; background: white; margin: 5px 0; }

/* ---- Mobile Nav Overlay ---- */
.mobile-nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--charcoal); z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; transform: translateX(100%); transition: transform 0.3s; }
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a { color: white; text-decoration: none; font-size: 1.3rem; font-family: 'Playfair Display', serif; }
.mobile-nav-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: white; font-size: 2rem; cursor: pointer; }

/* ---- Page Hero Banner ---- */
.page-hero { background: var(--sand-light); padding: 5rem 2rem 4rem; text-align: center; }
.page-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-bottom: 0.5rem; }
.page-hero p { font-size: 1.1rem; color: var(--charcoal-light); max-width: 600px; margin: 0 auto; }

/* ---- Footer ---- */
.site-footer { background: var(--charcoal); color: rgba(255,255,255,0.6); padding: 2.5rem 2rem 1.5rem; }
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.footer-inner span:first-child { font-size: 0.8rem; }
.footer-tagline { font-family: 'Caveat', cursive; font-size: 1rem; color: var(--ochre-light); }

/* ---- Responsive: Nav ---- */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .mobile-menu-btn { display: block; }
}