:root{
  --primary:#0ea5e9; /* sky-500 */
  --primary-700:#0369a1;
  --bg:#ffffff;
  --text:#0f172a; /* slate-900 */
  --muted:#f1f5f9; /* slate-100 */
  --border:#e2e8f0; /* slate-200 */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin-inline:auto;padding:1rem}

.site-header{position:sticky;top:0;background:rgba(255,255,255,0.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border);z-index:50}
.header-row{display:flex;align-items:center;gap:1rem}
.brand{font-weight:600;font-size:2rem;color:#0ea5e9;font-style: italic; font-family: 'Playfair Display', serif;letter-spacing: 1px; text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);  margin: 20px 0;padding: 10px 20px;animation: fadeIn 2s ease-in-out;}
.nav{margin-left:auto;display:flex;gap:1rem;align-items:center}
.nav a{padding:.5rem .75rem;border-radius:.75rem}
.nav a.active, .nav a[aria-current="page"], .nav a:hover{background:var(--muted);text-decoration:none}
.nav-toggle{display:none;margin-left:auto;border:1px solid var(--border);background:var(--muted);padding:.5rem .75rem;border-radius:.75rem}

.hero{padding:3rem 0;background:linear-gradient(180deg, var(--muted), transparent)}
.hero-content{display:grid;gap:1rem;justify-items:start}
.search{display:grid;grid-template-columns:1fr 1fr auto;gap:.75rem;align-items:end;background:#fff;padding:1rem;border:1px solid var(--border);border-radius:1rem}
.search input{width:100%}
.search label{display:grid;gap:.25rem;font-size:.9rem}
.search button{height:42px}

.grid{display:grid;gap:1rem}
.grid.two{grid-template-columns:1fr 1fr}
.cards{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid var(--border);border-radius:1rem;padding:1rem;display:grid;gap:.5rem;background:#fff}
.img-placeholder{height:160px;border-radius:.75rem;background:linear-gradient(135deg,var(--muted),#e5f6fd);display:grid;place-items:center;font-weight:700;color:var(--primary-700)}
.btn,.btn-secondary{display:inline-block;padding:.6rem .9rem;border-radius:.75rem;border:1px solid var(--primary);background:var(--primary);color:white;text-decoration:none}
.btn:hover{background:var(--primary-700)}
.btn-secondary{background:transparent;color:var(--primary)}
.btn-secondary:hover{background:#e6f4fb}

.filters{margin-bottom:1rem;display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

label{display:block}
input,select,textarea,button{font:inherit}
input,select,textarea{width:100%;padding:.6rem .7rem;border:1px solid var(--border);border-radius:.6rem;background:#fff}
button{cursor:pointer}

.status{margin-top:1rem;padding:.75rem;border-radius:.6rem;border:1px dashed var(--border);background:var(--muted)}
.checklist{columns:2}
.map-placeholder{height:200px;border:1px dashed var(--border);border-radius:.75rem;display:grid;place-items:center;background:var(--muted);color:#64748b}

.site-footer{margin-top:3rem;border-top:1px solid var(--border);background:#fff}
.site-footer p{margin:0;padding:1rem 0;color:#334155}

/* Prevent horizontal overflow on contact page */
.grid.two aside,
.grid.two aside p {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Make embedded map responsive and override fixed width attribute */
.map-placeholder iframe {
  width: 100% !important;
  max-width: 100%;
  height: 300px;               /* adjust if you want taller/shorter */
  display: block;
  border: 0;
}

/* On small screens stack layout and reduce iframe height */
@media (max-width: 640px) {
  .grid.two { grid-template-columns: 1fr; }
  .map-placeholder iframe { height: 220px; }
}

/* Optional: final safety to hide any tiny remaining overflow (use only if needed) */
html, body {
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px){
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .nav{display:none;position:absolute;right:1rem;top:56px;background:#fff;border:1px solid var(--border);border-radius:1rem;padding:.5rem;flex-direction:column;min-width:200px}
  .nav.show{display:flex}
  .nav-toggle{display:inline-block}
  .grid.two{grid-template-columns:1fr}
  .search{grid-template-columns:1fr}
}

/* Header: make logo + tagline responsive and avoid overflow */
.header-row{
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:nowrap;        /* keep logo + brand + toggle on single line */
  min-height:48px;
}

/* logo sizing (fixed max, scales down on mobile) */
.header-row img{
  flex:0 0 auto;
  width:64px;
  height:auto;
  max-width:64px;
  object-fit:contain;
}

/* compact brand/tagline: remove large padding/margin and prevent overflow */
.brand{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  padding:0 8px;
  font-size:1.15rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* hamburger button: show 3 bars, hide visible text
    (hidden by default; enabled only in mobile media query) */
.nav-toggle{
  /* keep visual styling but keep it hidden on desktop */
  align-items:center;
  justify-content:center;
  position:relative;
  width:44px;
  height:38px;
  padding:0;
  margin-left:auto;
  background:transparent;
  border:1px solid var(--border);
  border-radius:8px;
  color:transparent;     /* hide text visually */
  font-size:0;           /* ensure text doesn't affect layout */
  overflow:visible;
  display:none;          /* hidden on laptop/desktop */
}

/* three bars using single pseudo-element (middle + top/bottom via box-shadow) */
.nav-toggle::before{
  content:'';
  display:block;
  width:18px;
  height:2px;
  background:var(--primary);
  border-radius:2px;
  box-shadow: 0 -6px 0 var(--primary), 0 6px 0 var(--primary);
  transition:transform .18s ease, opacity .18s ease;
}

/* optional: show X when menu open */
.nav-toggle[aria-expanded="true"]::before{
  transform: rotate(45deg);
  box-shadow: none;
}
.nav-toggle[aria-expanded="true"]::after{
  content:'';
  position:absolute;
  width:18px;
  height:2px;
  background:var(--primary);
  border-radius:2px;
  transform: rotate(-45deg);
  transition:opacity .18s ease;
}

/* reduce logo + brand sizes on small screens */
@media (max-width:640px){
  .header-row img{ width:44px; height:auto; max-width:44px; }
  .brand{ font-size:1rem; padding:0 6px; }
  /* ensure nav-toggle visible on mobile (already handled elsewhere) */
  .nav-toggle{ display:inline-flex; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}