/* ========== Base / Reset ========== */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color: #0f172a;
  background: #fff;
}

/* Links (generic) */
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(1,106,255,.35); border-radius: 6px; }

/* ========== Layout ========== */
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
/* Make header edge-to-edge without affecting other containers */
.ho-header .container,
.ho-header__row {
  max-width: none !important;
  width: 100% !important;
  padding-inline: 25px;
}

/* ========== Brand / Cards / Buttons ========== */
.brand { font-weight: 700; }

.card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  background: #fff;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #0ea5e9;
  background: #0ea5e9;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: transform .06s ease, box-shadow .18s ease, opacity .18s ease;
}
.btn:hover { box-shadow: 0 6px 18px rgba(14,165,233,.35); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(14,165,233,.35); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .6; pointer-events: none; cursor: not-allowed; }

/* Secondary Button */
.btn.secondary { background: #fff; color: #0ea5e9; border: 1px solid #0ea5e9; }
.btn.secondary:hover { background: #f0f9ff; }

/* ========== Forms ========== */
input, select, textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  margin: 6px 0;
  background: #fff; color: #0f172a;
  transition: box-shadow .18s ease, border-color .18s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: #94a3b8; box-shadow: 0 0 0 3px rgba(148,163,184,.25);
}
input:disabled, select:disabled, textarea:disabled {
  background: #f1f5f9; color: #64748b; cursor: not-allowed;
}

/* Label helper */
label small { color: #64748b; }

/* ========== Tables ========== */
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #e2e8f0; padding: 8px; text-align: left; }
th { background: #f8fafc; font-weight: 700; }

/* ========== Badges & Flags ========== */
.badge {
  display: inline-block;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  border-radius: 999px;
  padding: 4px 10px;
  margin-right: 6px;
  vertical-align: middle;
  font-weight: 600;
  line-height: 1;
}

/* Flags */
.flag-icon { height: 14px; width: auto; vertical-align: -2px; border-radius: 2px; }

/* ========== Alerts ========== */
.alert { padding: 10px; border-radius: 8px; margin-bottom: 10px; border: 1px solid transparent; }
.alert.success { background: #ecfeff; border-color: #67e8f9; color: #0e7490; }
.alert.error   { background: #fee2e2; border-color: #fecaca; color: #b91c1c; }

/* ========== Grid ========== */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }

/* Utilities */
.small { font-size: 12px; color: #475569; }
nav a.active { font-weight: 700; }

/* ============================
   HostingOpinion Header
   ============================ */
:root{
  --ho-bg:#f8fafc;          /* light header like screenshot */
  --ho-fg:#0f172a;          /* dark text */
  --ho-muted:#475569;
  --ho-ring:rgba(2,132,199,.15);
}

.ho-header { background: var(--ho-bg); color: var(--ho-fg); position: sticky; top:0; z-index: 40; box-sizing: border-box; }
.ho-header__row{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* desktop: brand | nav | actions */
  align-items:center;
  gap:12px;
  min-height:64px;
}
.ho-header:after{ content:""; display:block; height:1px; background: rgba(2,6,23,.06); }

.ho-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ho-fg); min-width:0; }
.ho-logo{
  width:28px; height:28px; border-radius:9px;
  background: linear-gradient(135deg,#4f46e5,#22d3ee);
  box-shadow: 0 6px 18px rgba(2,132,199,.25);
}
.ho-brand__text{ font-weight:700; letter-spacing:.2px; line-height:1.1; }

/* Centered desktop nav */
.ho-nav{ display:flex; gap:26px; justify-content:center; }
.ho-nav a{
  color:var(--ho-muted); text-decoration:none; font-weight:600;
  padding:6px 2px; border-radius:8px;
}
.ho-nav a[aria-current="page"]{ color:var(--ho-fg); }
.ho-nav a:hover{ color:var(--ho-fg); background:rgba(15,23,42,.04); }

/* Right actions */
.ho-auth{ display:flex; justify-content:flex-end; align-items:center; gap:12px; }
.ho-link{ color:var(--ho-muted); text-decoration:none; font-weight:600; }
.ho-link:hover{ color:var(--ho-fg); }

/* Buttons in header */
.ho-btn{ display:inline-block; font-weight:700; text-decoration:none; padding:10px 14px; }
.ho-btn--pill{
  background: linear-gradient(135deg,#4f46e5,#22d3ee);
  color:#fff; border-radius:999px; box-shadow: 0 10px 24px var(--ho-ring);
}
.ho-btn--pill:hover{ filter: brightness(.98); transform: translateY(-1px); transition: .15s ease; }

/* Mobile toggle (hidden on desktop) */
.ho-toggle{
  display:none; background:transparent; border:0; width:40px; height:40px; margin-left:8px; cursor:pointer;
}
.ho-toggle .bar{ display:block; width:22px; height:2px; background:var(--ho-fg); margin:4px auto; border-radius:2px; }

/* Mobile menu panel (closed by default) */
.ho-mobile{
  display:none;
  background:var(--ho-bg);
  border-top:1px solid rgba(2,6,23,.08);
  box-shadow: 0 12px 32px rgba(2,6,23,.06);
  opacity:0; transform: scaleY(.98);
}
.ho-mobile__section{ padding:10px 16px; display:grid; gap:2px; }
.ho-mobile a{ color:var(--ho-fg); text-decoration:none; padding:12px 8px; border-radius:10px; }
.ho-mobile a:hover{ background: rgba(2,6,23,.04); }
.ho-mobile__auth{ border-top:1px solid rgba(2,6,23,.06); display:flex; gap:10px; }

/* --- Responsive --- */
@media (max-width: 900px){
  /* mobile: brand left | spacer | toggle right */
  .ho-header__row{ grid-template-columns: auto 1fr auto; gap:8px; }
  .ho-nav{ display:none; }
  .ho-auth{ display:none; }
  .ho-toggle{ display:block; justify-self:end; }

  /* open panel when data-open=true (no spaces in selector) */
  .ho-mobile[data-open="true"]{ display:block; opacity:1; transform: scaleY(1); }
}

/* prefers-reduced-motion: smoother without jump */
@media (prefers-reduced-motion:no-preference){
  .ho-mobile{ transition: transform .18s ease, opacity .18s ease; transform-origin: top; }
}