/* =====================================================================
   Airbnb-flavored theme overlay (OPTIONAL / REVERSIBLE)
   ---------------------------------------------------------------------
   This file only *overrides* the base style.css. To turn it OFF and go
   back to the original look, delete (or comment out) the single <link>
   to this file in app/templates/base.html. Nothing else changes.
   ===================================================================== */

:root {
  --air-coral: #ff385c;
  --air-coral-dark: #e11d48;
  --air-line: #ebebeb;
  --air-shadow: 0 6px 16px rgba(0, 0, 0, .10);
  --air-shadow-hover: 0 12px 28px rgba(0, 0, 0, .16);
  --air-radius: 16px;
}

body { background: #ffffff; }

/* ---- Header: clean white bar with a soft shadow (sticky like Airbnb) ---- */
.site-nav {
  background: #ffffff !important;
  border-bottom: 1px solid var(--air-line);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .05);
  position: sticky; top: 0; z-index: 1030;
}
.site-nav .navbar-brand { color: var(--air-coral) !important; font-weight: 800; }
.site-nav .nav-link { color: #222222 !important; }
.site-nav .nav-link:hover { color: #000000 !important; }
/* Brighter category colors on the light header */
.site-nav .nav-link.nav-looking   { color: #1f6bff !important; }
.site-nav .nav-link.nav-roommate  { color: #10a94a !important; }
.site-nav .nav-link.nav-sublet    { color: #e37b00 !important; }
.site-nav .nav-link.nav-community { color: #9327d6 !important; }
/* Page buttons are always pill-shaped, so only the color + shadow animate in
   smoothly on hover (no rectangular-to-round jump). */
.site-nav .nav-cat {
  border-radius: 999px !important;
  transition: background-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.site-nav .nav-cat:hover {
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
}
.site-nav .nav-cat.nav-looking:hover   { background: #2979ff !important; }
.site-nav .nav-cat.nav-roommate:hover  { background: #00c853 !important; }
.site-nav .nav-cat.nav-sublet:hover    { background: #ff9100 !important; }
.site-nav .nav-cat.nav-community:hover { background: #aa00ff !important; }
.site-nav .navbar-toggler { border-color: rgba(0, 0, 0, .1); }
.site-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(34,34,34,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Viewing switcher tuned for the light header */
.viewing-square { background: #f2f2f2; color: #444; }
.viewing-square:hover { background: #e7e7e7; color: #111; }
.viewing-square .vs-gender { color: var(--air-coral); }

/* ---- Softer, rounder cards with the signature Airbnb shadow ---- */
.card, .category-card { border-radius: var(--air-radius); }
.shadow-sm { box-shadow: var(--air-shadow) !important; }
.category-card:hover { box-shadow: var(--air-shadow-hover) !important; }

/* ---- Buttons: rounded, coral primary ---- */
.btn { border-radius: 10px; }
.btn-lg { border-radius: 12px; }
.btn-primary { background: var(--air-coral); border-color: var(--air-coral); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: var(--air-coral-dark) !important; border-color: var(--air-coral-dark) !important;
}
.btn-outline-secondary { border-radius: 10px; }

/* ---- Inputs: rounded with a coral focus ring ---- */
.form-control, .form-select {
  border-radius: 10px; border-color: #dddddd; padding: .5rem .8rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--air-coral);
  box-shadow: 0 0 0 .18rem rgba(255, 56, 92, .15);
}

/* ---- Larger surfaces get the rounder radius too ---- */
.hero { border-radius: 20px; }
#map { border-radius: var(--air-radius); }
.modal-content { border-radius: var(--air-radius); border: none; }

/* ---- Tables: more air, lighter rules ---- */
.table > :not(caption) > * > * { padding: .8rem .7rem; }
thead.table-light th {
  background: #fafafa; border-bottom: 1px solid #eee;
  font-weight: 600; color: #555;
}

/* ---- Footer link in coral ---- */
footer a { color: var(--air-coral); }