/* ============================================================
   SHARED FRAMEWORK — zero hex codes; all colors via variables.css
   Written with logical properties so one file serves LTR + RTL.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-family);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

.container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space); }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* ---- header / nav ---- */
.site-header { background: var(--brand-dark); color: var(--text-light); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: calc(var(--space) * 0.75); gap: var(--space); }
.brand { display: flex; align-items: center; gap: calc(var(--space) * 0.5); color: var(--text-light); font-weight: 700; font-size: 1.15rem; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 34px; width: auto; }
.site-nav { display: flex; align-items: center; gap: var(--space); flex-wrap: wrap; }
.site-nav a { color: var(--text-light); opacity: 0.92; }
.site-nav a:hover { opacity: 1; }
.nav-user { opacity: 0.75; font-size: 0.9rem; }
.nav-toggle { display: none; background: none; border: 1px solid var(--border-light); color: var(--text-light); border-radius: var(--radius-sm); padding: 0.25rem 0.6rem; font-size: 1.1rem; }

/* ---- hero ---- */
.hero { background: var(--surface); border-block-end: 1px solid var(--border); padding: calc(var(--space) * 2.5) var(--space); text-align: center; }
.hero h1 { margin-block: 0 calc(var(--space) * 0.5); color: var(--brand-dark); font-size: 2rem; }
.hero p { color: var(--text-muted); max-width: 46rem; margin-inline: auto; }

/* ---- cards / grids ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space); margin-block: var(--space); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space); box-shadow: var(--shadow-sm); }
.card h3 { margin-block-start: 0; color: var(--brand-dark); }
.card .price { font-weight: 700; color: var(--brand); }

.listing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space); margin-block: var(--space); }
.listing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 0.35rem; }
.listing-card.featured { border-color: var(--accent); box-shadow: var(--shadow); }
.listing-card .meta { color: var(--text-muted); font-size: 0.9rem; }

/* ---- buttons ---- */
.btn { display: inline-block; border-radius: var(--radius-sm); padding: 0.55rem 1.1rem; border: 1px solid transparent; cursor: pointer; font-size: 0.95rem; }
.btn-primary { background: var(--brand); color: var(--text-light); }
.btn-primary:hover { background: var(--brand-dark); text-decoration: none; }
.btn-danger { background: var(--accent); color: var(--text-light); }
.btn-ghost { background: transparent; color: var(--brand); border-color: var(--border); }
.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.85rem; }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; margin-block: var(--space); }
th, td { text-align: start; padding: 0.55rem 0.7rem; border-block-end: 1px solid var(--border); }
th { background: var(--surface); color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* ---- forms ---- */
form .field { margin-block-end: var(--space); }
label { display: block; margin-block-end: 0.3rem; font-weight: 600; font-size: 0.9rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], select, textarea {
    width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--input-border); border-radius: var(--radius-sm);
    background: var(--input-bg); color: var(--text); font: inherit;
}
textarea { min-height: 130px; }
.form-hint { color: var(--text-muted); font-size: 0.85rem; }
.hp { position: absolute; inset-inline-start: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ---- badges / alerts ---- */
.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: var(--radius-xs); font-size: 0.78rem; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
.badge-featured { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); color: var(--brand-dark); border-color: var(--accent); }
.badge-ok { background: var(--success-bg); color: var(--success-text); border-color: var(--success-text); }

.alert { max-width: var(--max-width); margin: var(--space) auto; padding: 0.7rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.alert-success { background: var(--success-bg); color: var(--success-text); border-color: var(--success-text); }
.alert-error { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--brand-dark); border-color: var(--accent); }
.alert-info { background: var(--surface); color: var(--text); }

/* ---- news / jobs / misc ---- */
.news-card { border-block-end: 1px solid var(--border); padding-block: var(--space); }
.news-card .source { color: var(--text-muted); font-size: 0.85rem; }
.job-row { display: flex; justify-content: space-between; gap: var(--space); align-items: baseline; flex-wrap: wrap; }
.job-row .company { color: var(--text-muted); }
.filter-bar { display: flex; gap: calc(var(--space) * 0.5); flex-wrap: wrap; margin-block: var(--space); }
.page-head { margin-block: var(--space); }
.page-head p { color: var(--text-muted); }
.error-page { text-align: center; padding-block: calc(var(--space) * 3); }

/* ---- legal pages ---- */
.legal-page { max-width: 52rem; white-space: pre-wrap; }

/* ---- footer ---- */
.site-footer { background: var(--brand-dark); color: var(--text-light); margin-block-start: calc(var(--space) * 2); }
.footer-inner { display: flex; justify-content: space-between; gap: var(--space); flex-wrap: wrap; padding-block: var(--space); font-size: 0.9rem; }
.footer-links a { color: var(--text-light); opacity: 0.85; margin-inline-start: var(--space); }

/* ---- responsive ---- */
@media (max-width: 640px) {
    .nav-toggle { display: block; }
    .site-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; }
    .site-nav.open { display: flex; }
    .header-inner { flex-wrap: wrap; }
    .hero h1 { font-size: 1.5rem; }
}

.badge-err { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--brand-dark); border-color: var(--accent); }
.panel { margin-block: calc(var(--space) * 1.5); padding: var(--space); border: 1px solid var(--border); border-radius: var(--radius, 8px); background: var(--surface); }
.panel h2 { margin-top: 0; }