/* =============================================
   L&A TRAVEL LOG — Shared Brand Styles
   ============================================= */

/* --- Google Fonts loaded in HTML head ---
   Plus Jakarta Sans: 400, 500, 600, 700, 800
   Caveat: 400, 600
   ------------------------------------------- */

/* --- Brand Tokens --- */
:root {
  /* Palette — warm golden-hour inspired */
  --bg: #FEFCF9;
  --bg-alt: #F7F3ED;
  --bg-card: #FFFFFF;
  --bg-dark: #1A1814;
  --bg-dark-card: #262220;

  --text: #2D2A26;
  --text-secondary: #7A756E;
  --text-light: #ADA8A1;
  --text-on-dark: #F0EBE5;
  --text-on-dark-muted: #9E978F;

  --accent: #E8975D;
  --accent-hover: #D4854B;
  --accent-light: #FDF0E5;
  --accent-bg: #FEF7F0;

  --coral: #E06454;
  --teal: #2D8A72;
  --teal-light: #E6F4EF;

  --border: #EDE8E2;
  --border-dark: #3A3530;

  /* Type */
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent: 'Caveat', cursive;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(45,42,38,.05);
  --shadow-md: 0 4px 16px rgba(45,42,38,.07);
  --shadow-lg: 0 12px 40px rgba(45,42,38,.1);
  --shadow-xl: 0 24px 60px rgba(45,42,38,.14);

  /* Transitions */
  --ease: cubic-bezier(.22,1,.36,1);
}

/* --- Reset --- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.65; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
ul, ol { list-style:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
input[type="checkbox"] { cursor:pointer; }

/* --- Typography --- */
h1, h2, h3, h4, h5 { line-height:1.2; font-weight:700; }
.font-accent { font-family:var(--font-accent); }

/* --- Common Components --- */

/* Container */
.container { max-width:1140px; margin:0 auto; padding:0 2rem; }
.container-narrow { max-width:820px; margin:0 auto; padding:0 2rem; }

/* Nav */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.25rem 2.5rem;
  transition:all .35s var(--ease);
}
.site-nav.scrolled {
  background:rgba(254,252,249,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0.85rem 2.5rem;
}
.site-nav.dark { color:var(--text-on-dark); }
.site-nav.dark.scrolled { background:rgba(26,24,20,.92); border-bottom-color:var(--border-dark); }

.nav-brand {
  font-size:1.35rem; font-weight:800; letter-spacing:-.02em;
  display:flex; align-items:center; gap:.35rem;
}
.nav-brand .amp { color:var(--accent); font-weight:600; }

.nav-links { display:flex; gap:2rem; align-items:center; }
.nav-links a {
  font-size:.82rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  opacity:.65; transition:opacity .25s;
}
.nav-links a:hover, .nav-links a.active { opacity:1; }

.nav-toggle { display:none; flex-direction:column; gap:5px; padding:4px; cursor:pointer; }
.nav-toggle span { width:22px; height:2px; background:currentColor; border-radius:2px; transition:all .3s; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.7rem 1.5rem; border-radius:var(--r-full);
  font-size:.85rem; font-weight:600; letter-spacing:.02em;
  transition:all .25s var(--ease);
}
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); transform:translateY(-1px); box-shadow:var(--shadow-md); }
.btn-outline { border:1.5px solid var(--border); color:var(--text); }
.btn-outline:hover { border-color:var(--accent); color:var(--accent); }
.btn-sm { padding:.5rem 1rem; font-size:.78rem; }

/* Badges / Pills */
.badge {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .8rem; border-radius:var(--r-full);
  font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
}
.badge-planning { background:#FEF3C7; color:#92400E; }
.badge-completed { background:var(--teal-light); color:var(--teal); }
.badge-dream { background:#EDE9FE; color:#6D28D9; }

/* Cards */
.card {
  background:var(--bg-card); border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border);
  transition:all .3s var(--ease);
}
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }

/* Section Headers */
.section-label {
  font-family:var(--font-accent); font-size:1.3rem; color:var(--accent);
  margin-bottom:.35rem;
}
.section-title {
  font-size:clamp(1.8rem, 3.5vw, 2.6rem); font-weight:800;
  letter-spacing:-.03em; margin-bottom:.5rem;
}
.section-subtitle {
  font-size:1rem; color:var(--text-secondary); max-width:560px;
}

/* Divider */
.divider { height:1px; background:var(--border); margin:3rem 0; }

/* --- Scroll Animations --- */
.fade-in {
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.fade-in.visible { opacity:1; transform:translateY(0); }
.fade-in-left {
  opacity:0; transform:translateX(-24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.fade-in-left.visible { opacity:1; transform:translateX(0); }
.fade-in-right {
  opacity:0; transform:translateX(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.fade-in-right.visible { opacity:1; transform:translateX(0); }

/* Stagger children */
.stagger > *:nth-child(1) { transition-delay:0s; }
.stagger > *:nth-child(2) { transition-delay:.08s; }
.stagger > *:nth-child(3) { transition-delay:.16s; }
.stagger > *:nth-child(4) { transition-delay:.24s; }
.stagger > *:nth-child(5) { transition-delay:.32s; }
.stagger > *:nth-child(6) { transition-delay:.4s; }

/* --- Footer --- */
.site-footer {
  background:var(--bg-dark); color:var(--text-on-dark);
  padding:4rem 2.5rem 2rem; text-align:center;
}
.footer-brand { font-size:1.6rem; font-weight:800; margin-bottom:.25rem; }
.footer-brand .amp { color:var(--accent); }
.footer-tagline { font-family:var(--font-accent); font-size:1.15rem; color:var(--text-on-dark-muted); margin-bottom:2rem; }
.footer-bottom { padding-top:1.5rem; border-top:1px solid var(--border-dark); font-size:.75rem; color:var(--text-on-dark-muted); }

/* --- Responsive --- */
@media (max-width:768px) {
  .site-nav { padding:1rem 1.25rem; }
  .site-nav.scrolled { padding:.75rem 1.25rem; }
  .nav-links { display:none; }
  .nav-links.open {
    display:flex; flex-direction:column;
    position:fixed; inset:0; background:rgba(254,252,249,.98);
    align-items:center; justify-content:center; gap:1.5rem;
    z-index:99;
  }
  .site-nav.dark .nav-links.open { background:rgba(26,24,20,.98); }
  .nav-links.open a { font-size:1.15rem; opacity:1; }
  .nav-toggle { display:flex; z-index:101; }
  .container, .container-narrow { padding:0 1.25rem; }
}