/*
Theme Name: HyderabadAds Portal
Theme URI: https://hyderabadads.in
Author: Hermes / SlopSites
Description: Local classifieds, business directory and online-ad safety portal for Hyderabad.
Version: 0.1.0
Text Domain: hyderabadads
*/

:root {
  --ha-ink: #111827;
  --ha-muted: #526174;
  --ha-line: #d8e0ea;
  --ha-bg: #f5f7fb;
  --ha-card: #ffffff;
  --ha-blue: #0f63ff;
  --ha-blue-dark: #073b99;
  --ha-green: #068b68;
  --ha-orange: #f59e0b;
  --ha-red: #dc2626;
  --ha-radius: 14px;
  --ha-shadow: 0 18px 45px rgba(15, 35, 70, .09);
  --ha-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 15% 8%, rgba(15, 99, 255, .10), transparent 28rem),
    radial-gradient(circle at 90% 0%, rgba(6, 139, 104, .12), transparent 25rem),
    var(--ha-bg);
  color: var(--ha-ink);
  font-family: var(--ha-font);
  font-size: 16px;
  line-height: 1.6;
}
a { color: var(--ha-blue-dark); text-decoration: none; }
a:hover { color: var(--ha-blue); }
img { max-width: 100%; height: auto; }

.ha-wrap { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.ha-skip {
  position: absolute; left: -999px; top: 8px; z-index: 1000;
  background: var(--ha-ink); color: #fff; padding: 8px 12px; border-radius: 8px;
}
.ha-skip:focus { left: 8px; }

.ha-topbar {
  background: #0b1f3a;
  color: #dbeafe;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ha-topbar .ha-wrap {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.ha-lang { display: flex; gap: 8px; align-items: center; }
.ha-lang a {
  color: #dbeafe;
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}

.ha-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ha-line);
}
.ha-header-row {
  min-height: 82px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
}
.ha-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ha-ink);
  font-weight: 900;
  letter-spacing: 0;
}
.ha-brand-logo {
  display: block;
  width: clamp(156px, 22vw, 226px);
  max-height: 64px;
  object-fit: contain;
}
.ha-logo-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--ha-blue), var(--ha-green));
  box-shadow: 0 10px 25px rgba(15, 99, 255, .22);
}
.ha-brand-fallback strong { display: block; font-size: 22px; line-height: 1; }
.ha-brand-fallback span { display: block; color: var(--ha-muted); font-size: 12px; font-weight: 700; margin-top: 4px; }

.ha-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  margin: 0;
}
.ha-nav a {
  color: #263244;
  font-weight: 800;
  padding: 10px 11px;
  border-radius: 999px;
  display: inline-flex;
}
.ha-nav a:hover, .ha-nav .current-menu-item > a {
  background: #e9f0ff;
  color: var(--ha-blue-dark);
}
.ha-cta, .ha-button, button.ha-button, input[type="submit"].ha-button {
  border: 0;
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--ha-blue);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(15, 99, 255, .22);
}
.ha-cta:hover, .ha-button:hover { background: var(--ha-blue-dark); color: #fff; }
.ha-button-secondary {
  background: #fff;
  color: var(--ha-blue-dark);
  border: 1px solid var(--ha-line);
  box-shadow: none;
}
.ha-button-secondary:hover { background: #eef5ff; color: var(--ha-blue-dark); }

.ha-main { padding: 24px 0 56px; }
.ha-ad-banner {
  margin: 0 0 26px;
}
.ha-ad-banner .ha-wrap {
  display: grid;
  gap: 8px;
}
.ha-ad-label {
  color: #64748b;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ha-ad-link {
  display: block;
  width: min(100%, 860px);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid #cbd5e1;
  border-radius: 16px;
  background: #061529;
  box-shadow: 0 14px 34px rgba(15, 35, 70, .10);
}
.ha-ad-link img {
  display: block;
  width: 100%;
  height: auto;
  background: #061529;
}
.ha-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid #bfd3ef;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(239, 249, 255, .88)),
    repeating-linear-gradient(120deg, transparent 0 24px, rgba(15, 99, 255, .05) 24px 25px);
  box-shadow: var(--ha-shadow);
}
.ha-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 28px;
  padding: clamp(28px, 5vw, 58px);
}
.ha-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ha-green);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .04em;
}
.ha-hero h1, .ha-page-hero h1 {
  margin: 12px 0;
  font-size: clamp(34px, 6vw, 66px);
  line-height: .98;
  letter-spacing: 0;
}
.ha-hero p, .ha-page-hero p {
  color: #334155;
  font-size: clamp(17px, 2vw, 21px);
  max-width: 760px;
}
.ha-search-box {
  margin-top: 24px;
  background: #fff;
  border: 1px solid var(--ha-line);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 12px 30px rgba(15, 35, 70, .08);
}
.ha-search-form {
  display: grid;
  grid-template-columns: 1fr 180px 150px auto;
  gap: 10px;
}
.ha-field, .ha-form input, .ha-form select, .ha-form textarea, .ha-search-form input, .ha-search-form select {
  width: 100%;
  min-height: 46px;
  border: 1px solid #c9d5e5;
  border-radius: 12px;
  background: #fff;
  color: var(--ha-ink);
  padding: 10px 12px;
  font: inherit;
}
.ha-form textarea { min-height: 150px; resize: vertical; }
.ha-form label { display: grid; gap: 7px; color: #1f2937; font-weight: 800; }
.ha-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ha-form .ha-full { grid-column: 1 / -1; }
.ha-help { color: var(--ha-muted); font-size: 13px; }

.ha-hero-panel {
  background: #0b1f3a;
  color: #fff;
  border-radius: 20px;
  padding: 24px;
  display: grid;
  align-content: center;
  min-height: 360px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.ha-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.ha-stat {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  padding: 14px;
}
.ha-stat strong { display: block; font-size: 30px; line-height: 1; }
.ha-stat span { color: #bfdbfe; font-size: 12px; font-weight: 800; }

.ha-section { margin-top: 44px; }
.ha-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  border-bottom: 1px solid var(--ha-line);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.ha-section h2 { margin: 0; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; }
.ha-section-desc { color: var(--ha-muted); max-width: 720px; margin: 8px 0 0; }

.ha-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ha-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ha-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ha-card {
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  border-radius: var(--ha-radius);
  box-shadow: 0 12px 28px rgba(15, 35, 70, .05);
  padding: 18px;
}
.ha-card h3 { margin: 0 0 8px; line-height: 1.2; font-size: 21px; }
.ha-card p { margin: 8px 0; color: #405068; }
.ha-card-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin: -18px -18px 4px;
  border-radius: var(--ha-radius) var(--ha-radius) 0 0;
  background: #e6eef8;
}
.ha-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ha-card-media-small { aspect-ratio: 5 / 3; }
.ha-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
  color: var(--ha-muted);
  font-size: 13px;
  font-weight: 800;
}
.ha-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 5px 10px;
  background: #eef5ff;
  color: var(--ha-blue-dark);
  font-size: 13px;
  font-weight: 900;
}
.ha-chip-green { background: #dcfce7; color: #05603a; }
.ha-chip-orange { background: #fff7ed; color: #9a3412; }
.ha-price { color: var(--ha-green); font-size: 22px; font-weight: 950; }

.ha-category-card {
  display: grid;
  min-height: 150px;
  align-content: space-between;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--ha-line);
  padding: 18px;
  transition: transform .16s ease, border-color .16s ease;
}
.ha-category-card:hover { transform: translateY(-2px); border-color: #9bb8e7; }
.ha-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #dbeafe, #ccfbf1);
  color: var(--ha-blue-dark);
  font-weight: 950;
}

.ha-listing-card, .ha-business-card {
  display: grid;
  gap: 12px;
}
.ha-listing-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.ha-verified { color: var(--ha-green); font-weight: 900; }
.ha-pending { color: var(--ha-orange); font-weight: 900; }

.ha-notice {
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #7c2d12;
  border-radius: 14px;
  padding: 14px 16px;
}
.ha-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #14532d;
}
.ha-safety-box {
  background: #0b1f3a;
  color: #e0f2fe;
  border-radius: 18px;
  padding: 22px;
}
.ha-safety-box h2, .ha-safety-box h3 { color: #fff; }
.ha-safety-box a { color: #bfdbfe; font-weight: 900; }

.ha-content {
  background: var(--ha-card);
  border: 1px solid var(--ha-line);
  border-radius: 20px;
  padding: clamp(22px, 4vw, 42px);
  box-shadow: var(--ha-shadow);
}
.ha-content h1, .ha-content h2, .ha-content h3 { line-height: 1.15; }
.ha-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  overflow: hidden;
  border-radius: 12px;
}
.ha-content th, .ha-content td { border: 1px solid var(--ha-line); padding: 10px 12px; text-align: left; }
.ha-content th { background: #eef5ff; }
.ha-featured-image {
  margin: 20px 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--ha-line);
  background: #e6eef8;
}
.ha-featured-image img { width: 100%; height: auto; display: block; }

.ha-breadcrumbs {
  color: var(--ha-muted);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 18px;
}
.ha-breadcrumbs a { color: var(--ha-muted); }

.ha-footer {
  background: #08172c;
  color: #dbeafe;
  padding: 40px 0 24px;
}
.ha-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 24px;
}
.ha-footer h3 { color: #fff; margin-top: 0; }
.ha-footer a { color: #dbeafe; }
.ha-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ha-footer-bottom {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: #9fb5d3;
  font-size: 13px;
}

@media (max-width: 960px) {
  .ha-header-row { grid-template-columns: 1fr; gap: 12px; padding: 14px 0; }
  .ha-nav ul { justify-content: start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .ha-hero-inner { grid-template-columns: 1fr; }
  .ha-search-form { grid-template-columns: 1fr; }
  .ha-grid, .ha-grid-4, .ha-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ha-wrap { width: min(100% - 22px, 1180px); }
  .ha-topbar .ha-wrap { align-items: start; flex-direction: column; padding: 8px 0; }
  .ha-brand-logo { width: 164px; max-height: 52px; }
  .ha-hero h1, .ha-page-hero h1 { font-size: 38px; }
  .ha-grid, .ha-grid-4, .ha-grid-2, .ha-form-grid, .ha-footer-grid { grid-template-columns: 1fr; }
  .ha-section-head { align-items: start; flex-direction: column; }
  .ha-stat-grid { grid-template-columns: 1fr; }
}