/* Main styles for ExploreBali */
:root{
  --color-bg: #ffffff;
  --color-primary: #006b5a;    /* deep teal */
  --color-accent: #f2a154;     /* warm accent */
  --color-muted: #6b6b6b;
  --color-on-primary: #ffffff;
  --max-content-width: 1100px;
  --radius: 10px;
  --transition: 0.18s ease-in-out;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --base-font-size: 16px;
}

html { font-size: var(--base-font-size); }
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: #222;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header */
.site-header {
  background: linear-gradient(180deg, rgba(0,0,0,0.02), transparent);
  border-bottom: 1px solid #eee;
}
.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
}
.brand { display:flex; align-items:center; gap:.75rem; }
.logo { width:48px; height:auto; }
.site-title { font-size:1.25rem; font-weight:700; color:var(--color-primary); }

/* Nav */
.primary-nav .nav-list { display:flex; gap:1rem; align-items:center; }
.primary-nav .nav-list a { padding:.35rem .5rem; border-radius:6px; color:var(--color-muted); }
.primary-nav .nav-list a:hover, .primary-nav .nav-list a[aria-current="page"] { color:var(--color-primary); background:rgba(0,107,90,0.06); }

/* Hero */
.hero {
  position:relative;
  display:grid;
  grid-template-columns: 1fr;
  gap:1rem;
  margin:1.5rem 0;
  align-items:center;
}
.hero-image { width:100%; border-radius:12px; display:block; }
.hero-content { position:relative; margin-top:-4.5rem; background:rgba(255,255,255,0.95); padding:1rem; border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,0.06); }
.hero-content h2 { margin-bottom:.5rem; color:var(--color-primary); font-size:1.6rem; }
.hero-content p { color:var(--color-muted); }

/* Grid utilities */
.grid { display:grid; gap:1rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Cards */
.card { background:#fff; border:1px solid #eee; border-radius:10px; overflow:hidden; display:flex; flex-direction:column; transition:transform var(--transition), box-shadow var(--transition); }
.card:hover { transform:translateY(-6px); box-shadow:0 10px 24px rgba(0,0,0,0.06); }
.card-img { width:100%; height:160px; object-fit:cover; display:block; }
.card-body { padding:1rem; }
.card-link { display:inline-block; margin-top:.5rem; color:var(--color-primary); font-weight:600; }

/* Media layouts */
.media { display:flex; gap:1rem; align-items:flex-start; margin:1rem 0; }
.media-img { width:280px; height:180px; object-fit:cover; border-radius:8px; }
.media-body { flex:1; }

/* Callout */
.callout { background:linear-gradient(90deg, rgba(242,161,84,0.08), rgba(0,107,90,0.03)); padding:1rem; border-radius:10px; margin:1.5rem 0; }

/* Forms */
.contact-form { max-width:720px; margin-top:1rem; }
.form-row { margin-bottom:1rem; display:flex; flex-direction:column; gap:.35rem; }
label { font-weight:600; color:var(--color-muted); }
input[type="text"], input[type="email"], select, textarea {
  border:1px solid #ddd; padding:.65rem .75rem; border-radius:8px; font-size:1rem; background:#fff;
}
input:focus, textarea:focus, select:focus { outline:3px solid rgba(0,107,90,0.12); border-color:var(--color-primary); }

/* Buttons */
.btn {
  display:inline-block;
  background:var(--color-primary);
  color:var(--color-on-primary);
  padding:.6rem .9rem;
  border-radius:8px;
  font-weight:700;
  border:none;
  cursor:pointer;
}
.btn:focus { outline:3px solid rgba(0,107,90,0.18); }
.btn--muted { background:#f2f2f2; color:#333; border:1px solid #e6e6e6; }

/* Footer */
.site-footer { margin-top:2rem; padding:1.25rem 0; border-top:1px solid #eee; background:#fafafa; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.footer-nav { display:flex; gap:1rem; }

/* Small helpers */
.container { padding-top: .75rem; padding-bottom: .75rem; }

/* Accessibility: high contrast fallback */
@media (prefers-contrast: more) {
  :root { --color-primary: #004d40; --color-accent: #e67e22; }
}