/* =======================
   BEJASKI HANDYMAN – styles.css
   Fully responsive, landing-focused, sticky navbar with scroll state
   ======================= */

/* ---- Theme ---- */
:root{
  --bg: #140C08;
  --surface: #1C1410;
  --surface-2: #241B16;
  --stroke: rgba(255,240,225,0.08);

  --text: #F4EEE7;
  --muted: #C8B9AE;

  --brand-1: #B55A22;
  --brand-2: #7A3B1A;

  --cta: #F6B086;
  --cta-text: #2A1A13;

  --radius-xl: 22px;
  --radius: 16px;
  --shadow: 0 14px 40px rgba(0,0,0,.35);
  --container: 1120px;

  /* Navbar */
  --topbar-bg: rgba(20,12,8,0.35);
  --topbar-bg-scrolled: rgba(20,12,8,0.92);
  --topbar-blur: 8px;
  --topbar-h-mobile: 56px;
  --topbar-h-desktop: 64px;

  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body.bg{
  margin:0; background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

h1,h2,h3{margin:0 0 10px}
.muted{color:var(--muted)}
.container{width:92%; max-width:var(--container); margin:0 auto}
.site-main{padding:16px 0 28px}
a{color:inherit}

/* =======================
   NAVBAR
   ======================= */
.topbar{
  position:sticky; top:0; z-index:1000;
  backdrop-filter: blur(var(--topbar-blur));
  -webkit-backdrop-filter: blur(var(--topbar-blur));
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--stroke);
  transition: background .25s ease, box-shadow .25s ease, height .2s ease, padding .2s ease;
}
.topbar.scrolled{
  background: var(--topbar-bg-scrolled);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  height: var(--topbar-h-mobile); padding: 0;
}
.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:var(--text); font-weight:800;
}
.logo-chip{
  width:40px; height:40px; border-radius:14px;
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2));
  box-shadow:var(--shadow); overflow:hidden; position:relative;
}
.logo-chip-img{width:100%; height:100%; object-fit:cover; display:block}
.nav{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end}
.nav a{
  color:var(--text); text-decoration:none; font-weight:600;
  padding:8px 10px; border-radius:999px;
}
.nav a.muted{opacity:.75}
.nav a.pill{background:var(--surface); border:1px solid var(--stroke)}

/* =======================
   BUTTONS
   ======================= */
.btn{display:inline-block; font-weight:800; text-decoration:none; border-radius:999px; padding:12px 18px}
.btn-cta{background:var(--cta); color:var(--cta-text); box-shadow:0 10px 30px rgba(246,176,134,.25)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--stroke)}
.link-more{color:#FFD1B2; text-decoration:none}

/* =======================
   LANDING HERO (no logo tile)
   ======================= */
.lp-hero{
  display:grid; grid-template-columns:1fr; gap:18px; align-items:center;
  margin-top:10px;
}
.lp-hero-copy h1{font-size:34px; line-height:1.1}
.lp-hero .lead{margin:8px 0 14px}
.cta-row{display:grid; gap:10px; margin:10px 0 8px}
.trust-points{list-style:none; padding:0; margin:8px 0 0; display:flex; gap:12px; flex-wrap:wrap}
.trust-points li{background:var(--surface); border:1px solid var(--stroke); padding:8px 12px; border-radius:999px; font-weight:600}

/* Decorative “service mosaic” illustration */
.lp-hero-art{width:100%}
.illus{display:grid; gap:12px}
.illus-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.illus-card{
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-radius:18px; padding:14px; box-shadow:var(--shadow);
  color:#FFF0E4;
}
.illus-icon{font-size:22px; margin-bottom:6px}
.illus-title{font-weight:800}
.illus-sub{opacity:.9}

/* =======================
   VALUE PROPS
   ======================= */
.lp-values{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px;
}
.value{
  background:var(--surface); border:1px solid var(--stroke);
  border-radius:16px; padding:14px;
}
.v-icon{font-size:22px; margin-bottom:6px}

/* =======================
   POPULAR SERVICES GRID
   ======================= */
.section{margin:24px 0}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px}
.svc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.svc-card{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--stroke); border-radius:16px; overflow:hidden;
}
.svc-media{aspect-ratio: 3 / 2; background:var(--surface-2)}
.svc-media img{width:100%; height:100%; object-fit:cover; display:block}
.svc-body{padding:12px}
.svc-body h3{margin:0 0 6px; font-size:1.05rem}
.svc-meta{display:flex; gap:12px; align-items:center; margin-top:8px}
.price{font-weight:800}
.duration{color:var(--muted); font-size:.95rem}

/* =======================
   TESTIMONIALS
   ======================= */
.lp-testimonials h2{margin-bottom:10px}
.t-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px}
.t-card{
  background:var(--surface); border:1px solid var(--stroke);
  border-radius:16px; padding:14px; line-height:1.5;
}
.t-card footer{margin-top:8px; color:var(--muted); font-weight:600}

/* =======================
   FINAL CTA
   ======================= */
.lp-cta .cta-card{
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
  background:linear-gradient(135deg, rgba(181,90,34,.18), rgba(122,59,26,.10));
  border:1px solid var(--stroke); border-radius:18px; padding:16px;
}
.cta-actions{display:flex; gap:10px; flex-wrap:wrap}

/* =======================
   SERVICES PAGE (unchanged but included for completeness)
   ======================= */
.list-head{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin:8px 0 14px}
.search{display:flex; gap:8px; width:100%; max-width:520px}
.search input{
  flex:1; background:var(--surface); border:1px solid var(--stroke); color:var(--text);
  border-radius:14px; padding:10px 12px; outline:none
}
.svc-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.svc-item{background:var(--surface); border:1px solid var(--stroke); border-radius:16px}
.svc-link{display:flex; align-items:center; gap:12px; padding:12px; color:inherit; text-decoration:none}
.svc-icon{width:42px; height:42px; border-radius:14px; background:var(--surface-2)}
.svc-title{font-weight:800}
.svc-cta{margin-left:auto; background:#3a2a21; color:#EADACF; padding:8px 14px; border-radius:999px}
.pager{display:flex; gap:10px; justify-content:center; margin-top:14px}
.page{padding:8px 12px; border-radius:10px; border:1px solid var(--stroke)}

/* =======================
   SERVICE DETAIL (your image chip sizing)
   ======================= */
.detail-head{
  display:flex; gap:12px; align-items:center; padding:12px;
  background:var(--surface); border:1px solid var(--stroke); border-radius:18px
}
.detail-chip{
  width:100%; max-width:420px; height:240px;
  border-radius:20px; overflow:hidden; background:var(--surface-2);
  margin-bottom:14px; display:flex; align-items:center; justify-content:center;
}
.detail-service-img{width:100%; height:100%}
.detail-service-img img{width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit}
.badge{display:inline-block; margin-top:6px; padding:6px 10px; border-radius:999px; background:#2b1e18; color:#EADACF; border:1px solid var(--stroke)}
.rating{margin-top:8px}
.price{margin-top:6px; font-weight:800; color:#FFD1B2}
.detail-body{margin-top:14px; background:var(--surface); border:1px solid var(--stroke); border-radius:18px; padding:14px}
.prose{color:#EDE5DE}
.detail-actions{display:grid; gap:10px; grid-template-columns:1fr}

/* =======================
   PROFILE
   ======================= */
.profile{max-width:720px; margin:0 auto}
.avatar img{width:74px; height:74px; border-radius:20px; object-fit:cover}
.avatar-fallback{
  width:74px; height:74px; border-radius:20px;
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2));
  display:grid; place-items:center; font-weight:900
}
.profile-head{margin:10px 0 16px}
.profile-list{list-style:none; padding:0; margin:0 0 18px; display:grid; gap:12px}
.profile-list li{
  display:flex; gap:12px; align-items:center; background:var(--surface);
  border:1px solid var(--stroke); border-radius:16px; padding:12px
}
.switch.on{display:inline-block; width:44px; height:24px; border-radius:999px; background:var(--cta); margin-left:8px}
.btn-outline{background:transparent; color:var(--text); border:1px solid var(--stroke)}
.wide{width:100%}

/* =======================
   AUTH
   ======================= */
.auth h1{text-align:center; margin:10px 0 16px}
.auth-card{
  max-width:520px; margin:0 auto; background:var(--surface);
  border:1px solid var(--stroke); border-radius:22px; padding:16px
}
.logo-banner{display:flex; justify-content:center; margin-bottom:12px}
.banner-chip{
  width:100%; height:120px; border-radius:22px;
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2));
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); overflow:hidden
}
.banner-B{font-size:74px; font-weight:900; color:#E6E0DB}
.form{display:grid; gap:10px; margin-top:12px}
.field .input, .field input{
  width:100%; padding:12px 14px; border-radius:16px; background:var(--surface-2);
  border:1px solid var(--stroke); color:var(--text); outline:none
}
.err{background:#3a1a14; border:1px solid #6a2c1d; color:#FFD1B2; padding:10px 12px; border-radius:12px}
.center{text-align:center}
.small{font-size:14px}
.link{color:#FFD1B2; text-decoration:underline}

/* =======================
   FOOTER
   ======================= */
.footer{border-top:1px solid var(--stroke); margin-top:40px}
.footer-inner{display:flex; align-items:center; justify-content:space-between; padding:16px 0}
.footer a{color:var(--muted); text-decoration:none; margin-left:14px}

/* =======================
   DESKTOP ENHANCEMENTS
   ======================= */
@media (min-width: 860px){
  .nav-inner{ height: var(--topbar-h-desktop); }
  .lp-hero{grid-template-columns:1.1fr .9fr; gap:28px}
  .lp-hero-copy h1{font-size:42px}
  .cta-row{display:flex; gap:12px}
  .detail-actions{grid-template-columns:auto auto}
}


/* =========================
   Worker Profile – Responsive polish
   ========================= */

/* Ensure the middle column can wrap (prevents overflow on narrow widths) */
.section.profile .detail-head .head-main{
  min-width: 0;
}

/* Contact line wraps long emails/phones nicely */
.section.profile .detail-head .contact-line{
  color: var(--muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Keep actions tidy on large screens too */
.section.profile .head-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

/* Thumbs: fixed rounded squares (guard against global img rules) */
.section.profile .svc-thumb{
  width: 56px;
  height: 56px;
  aspect-ratio: 1/1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--stroke);
  flex: 0 0 56px;
}
.section.profile .svc-thumb img{
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  max-width: none !important;
}
.section.profile .svc-item img{ max-width: none; }

/* Row layout */
.section.profile .svc-link{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
}

/* ---------- Mobile view ---------- */
@media (max-width: 640px){

  /* Stack the header card, center text */
  .section.profile .detail-head{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
  }

  .section.profile .detail-head .avatar{
    width: 64px;
    height: 64px;
    border-radius: 16px;
    margin: 0 auto;
    flex: 0 0 64px;
  }

  .section.profile .detail-head .head-main{
    text-align: center;
  }

  /* Buttons fill the row */
  .section.profile .head-actions{
    width: 100%;
    gap: 8px;
  }
  .section.profile .head-actions .btn{
    flex: 1 1 0;
    text-align: center;
  }

  /* Chips: wrap instead of horizontal scrolling on phones */
  .section.profile .cat-scroll{
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 6px;
    overflow-x: visible;
    padding-bottom: 0;
  }

  /* Services list: compact rows & smaller thumbs */
  .section.profile .svc-link{
    grid-template-columns: 52px 1fr auto;
    gap: 8px;
    padding: 8px;
  }
  .section.profile .svc-thumb{
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-basis: 52px;
  }
  .section.profile .svc-title{
    font-size: 1.025rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

@media (max-width: 380px){
  .section.profile .detail-head h2{ font-size: 1.08rem; }
}