/* ============================
   HONESTECH styles.css (full)
   ============================ */

/* ---- Theme tokens ---- */
:root{
  --bg:#0b0b0c;
  --panel:#121214;
  --ink:#f7f7f8;
  --muted:#bdbdbf;
  --brand:#ffd000;         /* gold */
  --brand-ink:#0b0b0c;     /* text on gold */
  --ok:#2ecc71;
  --danger:#ff4d4f;
  --ring:rgba(255,208,0,.5);
}

/* ---- Global reset / base ---- */
*{box-sizing:border-box}
html,body{height:100%;max-width:100%;overflow-x:hidden}
html,body{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#0b0b0c 0%,#0f0f12 60%,#0b0b0c 100%);
}
img,svg{max-width:100%;height:auto;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:24px}
.muted{color:var(--muted)}

/* Make sure mobile browsers respect dark UI */
:root, html, body { color-scheme: dark; background:#0b0b0c; }

/* ---- Header / Branding ---- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(180deg,#17171A 0%,#0F0F12 100%);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.site-header::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:linear-gradient(90deg,transparent 0%,var(--brand) 15%,var(--brand) 85%,transparent 100%);
  opacity:.9;
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:16px}
.logo{width:84px;height:84px;object-fit:contain}
.brand h1{margin:0; line-height:1; font-size:clamp(24px,4.5vw,40px)}
.brand h1 span{font-weight:600; font-size:.8em; letter-spacing:.08em}
.tagline{margin:.3rem 0 0; color:var(--muted); font-size:clamp(14px,2.8vw,17px)}

/* ---- Buttons ---- */
.btn{
  display:inline-block; padding:12px 16px; border:1px solid var(--brand);
  text-decoration:none; color:var(--brand); border-radius:10px;
  font-weight:700; letter-spacing:.02em; transition:.2s; cursor:pointer;
  background:transparent;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.35)}
.btn-solid{background:var(--brand); color:var(--brand-ink)}
.btn-ghost{border-color:#2a2a2f; color:var(--muted)}

/* ---- Hero / Cards / Sections ---- */
.hero{padding:32px 0}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:stretch}
.hero-card{
  background:var(--panel); border:1px solid #1f1f23; border-radius:16px; padding:20px;
}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{
  background:var(--panel); border:1px solid #1f1f23; border-radius:16px; padding:18px;
}
.article{
  max-width:800px; margin:0 auto; background:var(--panel);
  border:1px solid #1f1f23; border-radius:16px; padding:22px;
}

/* ---- Booking form ---- */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.field{display:flex; flex-direction:column; gap:6px}
.field input,.field select,.field textarea{
  background:#0f0f12; color:var(--ink); border:1px solid #1f1f23;
  border-radius:10px; padding:12px 14px; outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 4px var(--ring);
}
.field-span{grid-column:1/-1}
.actions{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap}

/* ---- Footer ---- */
.site-footer{
  border-top:1px solid #1f1f23; background:#0a0a0c; text-align:center; padding:24px; color:var(--muted)
}
.footer-grid{display:grid; gap:16px; grid-template-columns:repeat(3,1fr); text-align:left}

/* ---- Blogs ---- */
.blog-list{display:grid; gap:10px; padding-left:18px}

/* ---- Breadcrumbs ---- */
.breadcrumbs{color:var(--muted); font-size:.95rem}
.breadcrumbs a{color:var(--brand); text-decoration:none}

/* ============================
   Mobile Nav (Hamburger)
   ============================ */
.nav-toggle{display:none; position:relative; z-index:1001; width:44px; height:44px;
  border:1px solid #2a2a2f; border-radius:10px; background:#101014; cursor:pointer; padding:10px}
.nav-toggle .bar{display:block; height:2px; background:var(--brand); margin:5px 0; transition:.2s}
.nav-panel{
  position:fixed; top:0; left:0; height:100vh; width:78%; max-width:320px;
  background:#0e0e11; border-right:1px solid #1f1f23;
  transform:translateX(-100%); transition:transform .25s ease; z-index:1000; padding:16px;
  box-shadow:12px 0 30px rgba(0,0,0,.35)
}
.nav-menu{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.nav-menu a{
  display:block; padding:12px 10px; border:1px solid #26262a; border-radius:10px;
  text-decoration:none; color:#f7f7f8; background:#121214;
}
.nav-menu a:hover{border-color:var(--brand)}
.nav-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:999}
.nav-open .nav-panel{transform:none}
.nav-open #navBackdrop{display:block}
.nav-open #navToggle .bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-open #navToggle .bar:nth-child(2){opacity:0}
.nav-open #navToggle .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================
   Locations page: Yellow buttons
   ============================ */
.town-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.town-btn{
  display:block;
  text-decoration:none;
  background: var(--brand);
  color: var(--brand-ink);
  border: 1px solid #e6c300;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.town-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.30);
  border-color:#ffde33;
}
.town-btn:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,208,0,.45);
}

/* ============================
   Guides (Brake 101 / Filters 101)
   ============================ */
.guide-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
}
.guide-card{
  background: var(--panel);
  border:1px solid #1f1f23;
  border-radius:16px;
  padding:16px;
}
.guide-card img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  border:1px solid #232329;
  margin-bottom:12px;
}
.guide-card h3{ margin:.3rem 0 .4rem; }
.pill-row{
  display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 10px; padding:0; list-style:none;
}
.pill{
  background: #19191d;
  border:1px solid #2a2a2f;
  color: var(--ink);
  border-radius:999px;
  padding:6px 10px;
  font-size:.95rem;
}

/* ============================
   iPhone / Light-mode fixes
   ============================ */
/* Prevent iOS from forcing white backgrounds/autofill */
input, select, textarea, option {
  background-color:#0f0f12 !important;
  color:#f7f7f8 !important;
  border-color:#1f1f23 !important;
  -webkit-text-fill-color:#f7f7f8;
}
::placeholder{ color:#9a9aa0 }
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px #0f0f12 inset !important;
  -webkit-text-fill-color:#f7f7f8 !important;
  caret-color:#f7f7f8 !important;
  border:1px solid #1f1f23 !important;
}
select, option { background:#0f0f12 !important; color:#f7f7f8 !important; }

/* Safety: ensure core surfaces never flash white */
.card, .article, .hero-card { background:#121214 !important; }

/* ============================
   Responsive
   ============================ */
@media (max-width:900px){
  .nav-toggle{display:inline-block}
  .cta{display:none}
  .hero-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .logo{width:72px;height:72px}
  .guide-grid{grid-template-columns:1fr}
  .town-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:520px){
  .wrap{padding:14px}
  .brand{gap:12px}
  .logo{width:56px;height:56px}
  .actions .btn{width:100%}
  .town-grid{grid-template-columns:1fr}
}