/* ===========================
   Living Architecture — Modern CSS
   - Drop-in stylesheet to modernize look
   - Removes underlines, adds colorful boxed menu,
     modern cards for projects, improved forms, responsive
   =========================== */

/* ---------- CSS variables (theme) ---------- */
:root{
  --bg: #f6f8fb;
  --card-bg: #ffffff;
  --muted: #6b7280;
  --accent-1: #0ea5e9;   /* bright blue */
  --accent-2: #7c3aed;   /* purple */
  --accent-3: #10b981;   /* green */
  --accent-4: #fb923c;   /* orange */
  --text: #0f172a;
  --radius-lg: 14px;
  --radius-md: 10px;
  --glass: rgba(255,255,255,0.6);
  --shadow-sm: 0 6px 18px rgba(15,23,42,0.08);
  --shadow-md: 0 10px 30px rgba(15,23,42,0.12);
  --max-width: 1160px;
}

/* ---------- Global resets & base ---------- */
* { box-sizing: border-box; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html,body { height:100%; }
body{
  font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, #ffffff 100%);
  margin:0;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding: 24px 0;
}

/* Remove underlines globally and make link style modern */
a {
  text-decoration: none !important;  /* remove underlines site-wide */
  color: inherit;
  transition: color .18s ease, transform .18s ease;
  cursor: pointer;
}
a:hover { color: var(--accent-1); transform: translateY(-1px); }

/* Container utility */
.container {
  width: calc(100% - 48px);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 12px;
}

/* ---------- Header / Navigation ---------- */
/* Target likely menu wrapper used previously plus generic nav */
.ltn__utilize-menu, nav, .site-header {
  background: transparent;
  display: block;
}

/* sticky header shell */
.site-topbar {
  position: sticky;
  top: 12px;
  z-index: 999;
  margin: 0 auto;
  max-width: var(--max-width);
  padding: 12px;
  backdrop-filter: blur(6px);
}

/* Nav bar card */
.header-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(250,250,251,0.95));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display:flex;
  align-items:center;
  gap:18px;
  padding:12px 18px;
}

/* Logo */
.header-card .logo {
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  color:var(--accent-2);
  font-family: 'Playfair Display', serif;
}
.header-card .logo img { height:46px; width:auto; display:block; }

/* Menu list (desktop) */
.menu-list, .ltn__utilize-menu ul {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:12px;
  align-items:center;
}

/* Boxed menu items */
.menu-list .menu-item, .ltn__utilize-menu li {
  margin:0;
}
.menu-list .menu-item > a, .ltn__utilize-menu a {
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius: 12px;
  color:#fff;
  font-weight:600;
  box-shadow: 0 6px 18px rgba(2,6,23,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Colorize primary items — picks up order: Home, About, Services, Projects, Contact */
.menu-list .menu-item:nth-child(1) > a { background: linear-gradient(135deg,var(--accent-1), #06b6d4); }
.menu-list .menu-item:nth-child(2) > a { background: linear-gradient(135deg,var(--accent-2), #a78bfa); }
.menu-list .menu-item:nth-child(3) > a { background: linear-gradient(135deg,var(--accent-3), #34d399); }
.menu-list .menu-item:nth-child(4) > a { background: linear-gradient(135deg,var(--accent-4), #f97316); }
.menu-list .menu-item:nth-child(5) > a { background: linear-gradient(135deg,#ef476f,#ff7ab6); }

/* Hover lift */
.menu-list .menu-item > a:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* Submenu styling */
.ltn__utilize-menu .sub-menu {
  background: var(--card-bg);
  border-radius: 10px;
  padding:8px 8px;
  min-width:220px;
  box-shadow: var(--shadow-md);
  position:absolute;
  margin-top:10px;
  display:none; /* reveal on hover by default */
  z-index:999;
}
.ltn__utilize-menu li:hover > .sub-menu { display:block; }
.sub-menu li a {
  display:block;
  padding:8px 12px;
  color:var(--text);
  background:transparent;
  border-radius:8px;
  font-weight:500;
}
.sub-menu li a:hover { background:#f1f5ff; color:var(--accent-1); transform:none; }

/* Mobile: collapsible stacked menu */
.menu-toggle {
  display:none;
  background:transparent;
  border:0;
  font-size:24px;
}
@media (max-width: 900px){
  .menu-list { display:block; width:100%; }
  .menu-toggle { display:inline-block; }
  .menu-list .menu-item > a { display:block; width:100%; margin:8px 0; }
  .ltn__utilize-menu .sub-menu { position:static; display:none; padding-left:12px; }
  .ltn__utilize-menu .menu-item.open > .sub-menu { display:block; }
}

/* ---------- Hero / Intro section ---------- */
.hero {
  margin: 28px 0;
  padding: 36px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(124,58,237,0.06), rgba(14,165,233,0.03));
  display:flex;
  gap:24px;
  align-items:center;
  box-shadow: var(--shadow-sm);
}
.hero .hero-left {
  flex:1;
}
.hero h1{
  margin:0 0 8px 0;
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 3.8vw, 42px);
  color:var(--accent-2);
}
.hero p { color:var(--muted); margin:0 0 16px 0; font-size:1.03rem; }
.hero .cta {
  display:inline-flex;
  gap:10px;
  align-items:center;
}
.btn {
  display:inline-block;
  padding:10px 16px;
  border-radius: 10px;
  font-weight:600;
  border:0;
  cursor:pointer;
}
.btn-primary { background: linear-gradient(135deg,var(--accent-1), #06b6d4); color:white; box-shadow: 0 8px 30px rgba(6,182,212,0.16); }
.btn-secondary { background: transparent; border:1px solid rgba(15,23,42,0.06); color:var(--text); }

/* Hero media */
.hero .hero-media {
  width:420px;
  max-width:40%;
  border-radius:12px;
  overflow:hidden;
  box-shadow: var(--shadow-md);
}
@media (max-width:900px){
  .hero { flex-direction:column; }
  .hero .hero-media { max-width:100%; width:100%; }
}

/* ---------- Projects / Property cards ---------- */
.projects-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin: 22px 0;
}
.project-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
  display:flex;
  flex-direction:column;
}
.project-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }

.project-card .thumb {
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
}
.project-card .card-body {
  padding:14px 16px;
  flex:1;
}
.project-card h3 {
  margin:0 0 8px 0;
  font-size:1.06rem;
  color:var(--accent-2);
}
.project-card p { margin:0 0 12px 0; color:var(--muted); font-size:.96rem; }

.project-meta {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.meta-badge {
  background: linear-gradient(135deg,#eef2ff,#fef3c7);
  padding:6px 8px;
  border-radius:8px;
  font-size:.82rem;
  color:var(--muted);
  border:1px solid rgba(2,6,23,0.03);
}

/* Cards action area */
.card-actions {
  padding:12px 16px;
  border-top:1px dashed rgba(2,6,23,0.03);
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
}
.card-actions .price {
  font-weight:700;
  color:var(--accent-1);
}

/* Projects grid responsive */
@media (max-width: 1100px){ .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .projects-grid { grid-template-columns: 1fr; } }

/* ---------- Product / Property detail page tweaks ---------- */
.product-hero {
  display:flex;
  gap:22px;
  background:var(--card-bg);
  border-radius:12px;
  padding:18px;
  box-shadow: var(--shadow-sm);
  margin: 18px 0;
}
.product-gallery { flex:1; min-width:280px; border-radius:12px; overflow:hidden; }
.product-info { flex:1.1; padding:6px 8px; }
.list-features { display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.list-features .feat { background:#f8fafc; padding:8px 10px; border-radius:8px; color:var(--muted); }

/* ---------- Contact / Form styling ---------- */
.contact-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(250,250,251,0.7));
  border-radius: 12px;
  padding:18px;
  box-shadow:var(--shadow-sm);
}
.contact-card label { display:block; font-weight:600; margin-bottom:6px; color:var(--text); }
.contact-card input[type="text"],
.contact-card input[type="email"],
.contact-card textarea,
.contact-card select {
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(2,6,23,0.06);
  background: #fff;
  font-size:0.95rem;
  margin-bottom:12px;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.contact-card input:focus, .contact-card textarea:focus { box-shadow: 0 6px 18px rgba(2,6,23,0.06); border-color: var(--accent-1); }
.contact-card .form-row { display:flex; gap:12px; }
@media(max-width:720px){ .contact-card .form-row { flex-direction:column; } }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 36px;
  padding: 28px 0;
  color:var(--muted);
  background: linear-gradient(180deg, rgba(15,23,42,0.02), transparent);
  border-top: 1px solid rgba(2,6,23,0.03);
}
.site-footer .footer-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:18px; max-width:var(--max-width); margin:0 auto; padding:0 12px; }
@media(max-width:1024px){ .site-footer .footer-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px){ .site-footer .footer-grid { grid-template-columns: 1fr; } }

.footer-logo { font-weight:700; color:var(--accent-2); font-family:'Playfair Display', serif; }
.footer-links a { display:block; margin-bottom:8px; color:var(--muted); font-weight:500; }
.footer-bottom { text-align:center; padding:14px; color:rgba(11,18,40,0.6); font-size:.95rem; }

/* ---------- Utility helpers ---------- */
.kicker { font-weight:700; color:var(--accent-1); font-size:.9rem; display:inline-block; margin-bottom:8px; }
.lead { font-size:1.05rem; color:var(--muted); }

/* ---------- Small tweaks for legacy styles that add underlines (force remove) ---------- */
a[style*="text-decoration"], .btn a { text-decoration:none !important; }

/* End of stylesheet */